Здравствуйте!
Нужно написать скрипт, чтобы при нажатии на див/ссылку, плавно заблюрился определенный 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>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей