ПРОДАЮЩАЯ СТРАНИЦА

«Продающая страница» — в большинстве случаев, это одностраничный сайт в сети Интернет, …

ИНТЕРНЕТ МАГАЗИН

Интернет-магазин – популярная альтернатива обычным магазинам, позволяющая пользователю …

БИЗНЕС САЙТ

Бизнес-сайт служит для представления информации о Вашем бизнесе в сети Интернет. …

САЙТ ВИЗИТКА

Сайт-визитка - это не всегда маленький сайт. Сайт-визитка, вопреки сложившемуся мнению, …

ПЕРСОНАЛЬНЫЙ САЙТ

Персональный сайт — это сайт, который создан для конкретного человека или про …

Красивые эффекты с использованием CSS анимации к сетке изображений

Красивые эффекты с использованием CSS анимации к сетке изображений

Сегодня мы бы хотели поделиться с вами ещё одной пачкой эффектов. Идея заключается в отображении изображений в сетке. Возможностей реализовать это уйма, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab.

Для распределения изображений в сетке, воспользуемся библиотекой Masonry. Если вы не хотите использовать данную библиотеку или какую-либо другую, то вам нужно убрать инициализацию из скрипта и поработать над селекторами. Это не очень сложно.

Итак, каждое наше изображение, будет элементом ненумерованного списка:

<ul class="grid effect-4" id="grid">      <li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>      <li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>      <li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li>      <li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li>      <!-- ... -->  </ul>  

Задумка в том, чтобы добавлять специфический класс изображению когда тот попадает под зону просмотра. Элементам, которым только предстоит появиться, зададим класс animate. В CSS мы анимируем элементы и создаём эффеты:

/* Effect 4: fall perspective */  .grid.effect-4 {      perspective: 1300px;  }    .grid.effect-4 li {      transform-style: preserve-3d;  }    .grid.effect-4 li.animate {      transform: translateZ(400px) translateY(300px) rotateX(-90deg);      animation: fallPerspective .8s ease-in-out forwards;  }    @keyframes fallPerspective {      100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }  }  

Нам так же доступна целая куча настроек. Чтобы добавить больше неопределённости, вы можете задать минимальное и максимальное время появления новых элементов. Все элементы появляющиеся на страницу во время её прокрутки будут анимированы в зависимости от этих значений. К примеру, если мы выставим значение 0, то эффект будет мгновенным. Если 1, то соответственно 1 секунду.

new AnimOnScroll( document.getElementById( 'grid' ), {          minDuration : 0.4,          maxDuration : 0.7,          viewportFactor : 0.2      } );  

Надеюсь, вы найдёте полезным данный урок.


←  Вернуться в категорию  « CSS » 

 
Текст сообщения*

Защита от автоматических сообщений