Здравствуйте!
Нужно написать скрипт, чтобы при нажатии на див/ссылку, плавно заблюрился определенный div и появился блок повверх всего.
Типа модальное окно, но чтобы блюр применялся к блоку, а не накладывался как слой.
Вопрос: как можно такое реализовать?
Итак, вам необходимо:
JS: по клику на элемент переключать класс.
CSS:
$(function() {
$('.toggle-btn').click(function() {
$('.container').toggleClass('active');
return false;
});
});
.container {
position: relative;
background: #fff;
padding: 15px;
}
.container.active .container__inner {
-webkit-filter: blur(5px);
filter: blur(5px);
transition: all .3s;
}
.container__after {
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
padding: 15px;
transform: translateY(-200%);
transition: all .5s;
left: 0;
top: 0;
}
.container.active .container__after {
transform: translateY(0);
transition: all .5s .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="toggle-btn">Toggle blur</button>
<div class="container">
<div class="container__inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed ut voluptatum non ipsum autem porro qui animi, quod, laborum provident, repellat harum ea rem temporibus cum explicabo ratione itaque reiciendis tempore a. Ipsam doloremque eum perspiciatis nobis nulla iusto porro nisi, repellendus dignissimos, minima, minus illo quod. Quas, molestiae voluptatem pariatur voluptatibus quasi, dolores porro ex molestias ad adipisci libero minus totam non, unde ipsum illum fugiat nesciunt, est cum! Reiciendis quia, iste laboriosam ad corporis at quod consectetur, nobis minima necessitatibus optio perspiciatis laborum non cum provident deserunt ratione aut ullam ex rerum error quo deleniti accusantium placeat. Incidunt.
</div>
<div class="container__after">
Quas, molestiae voluptatem pariatur voluptatibus quasi, dolores porro ex molestias ad adipisci libero minus totam non, unde ipsum illum fugiat nesciunt, est cum! Reiciendis quia, iste laboriosam ad corporis at quod consectetur, nobis minima necessitatibus optio perspiciatis laborum non cum provident deserunt ratione aut ullam ex rerum error quo deleniti accusantium placeat. Incidunt.
</div>
</div>
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Здравствуйте, есть определенный набор строк, типа "L / Красный / 12345", как можно на странице найти их, и вырезать из них все что находится после...
Есть тестовое задание, сверстать небольшую страницу, одной из задач по js является: (дословно) кастомизированные селекты + картинка ниже
Добрый вечерСейчас верстаю одну страницу и мне нужно выровнять блоки в одну строку, использую я для этого float: left; Все бы хорошо, но у меня блоки...