При нажатии на блок блюр + появление блока [закрыто]

246
26 ноября 2016, 18:47

Здравствуйте!

Нужно написать скрипт, чтобы при нажатии на див/ссылку, плавно заблюрился определенный div и появился блок повверх всего.

Типа модальное окно, но чтобы блюр применялся к блоку, а не накладывался как слой.

Вопрос: как можно такое реализовать?

Answer 1

Итак, вам необходимо:

JS: по клику на элемент переключать класс.

CSS:

  1. Сделать класс, при наличии которого будет размываться один из потомков, а другой потомок будет появляться поверх имеющегося блока.
  2. Добавить этим классам анимацию.

$(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>

READ ALSO
Как найти определенный символ в строке и удалить значение после него (и вместе с ним) Jquery

Как найти определенный символ в строке и удалить значение после него (и вместе с ним) Jquery

Здравствуйте, есть определенный набор строк, типа "L / Красный / 12345", как можно на странице найти их, и вырезать из них все что находится после...

543
Кастомизированные селекты [закрыто]

Кастомизированные селекты [закрыто]

Есть тестовое задание, сверстать небольшую страницу, одной из задач по js является: (дословно) кастомизированные селекты + картинка ниже

276
Блоки div сливаются в одно

Блоки div сливаются в одно

Добрый вечерСейчас верстаю одну страницу и мне нужно выровнять блоки в одну строку, использую я для этого float: left; Все бы хорошо, но у меня блоки...

340
Как могу добавить font-face с .ttf (scss)

Как могу добавить font-face с .ttf (scss)

Пытался добавить файлttf и связывать с ним

279