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

  • Главная»
  • Уроки»
  • 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
    } );

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/5NqdWiDmyno/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Красивые эффекты с использованием CSS анимации к сетке изображений | | 2013-07-12 08:16:02 | | Статьи Web-мастеру | | Главная» Уроки» CSS» Красивые эффекты с использованием CSS анимации к сетке изображений Сегодня мы бы хотели поделиться с вами ещё одной пачкой эффектов. Идея заключается в отображении изображений в | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: