Автор

20 07.2013
Применение анимации для сетки изображений

Применение анимации для сетки изображений


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

Шаг 1. HTML

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

<ul>
<ul>
	<li><a href="http://ссылка/fWMM"><img alt="" src="images/1.jpg" /></a></li>
	<li><a href="http://ссылка/fWPV"><img alt="" src="images/2.jpg" /></a></li>
	<li><a href="http://ссылка/fWMT"><img alt="" src="images/3.jpg" /></a></li>
	<li><a href="http://ссылка/fQdt"><img alt="" src="images/4.png" /></a></li>
</ul>
</ul>
&nbsp;
<ul id="grid"><!-- ... --></ul>

Как вы уже догадались, задумка состоит в том, чтобы добавлять специфический класс изображению когда то попадает под зону просмотра.

 

Шаг 2. CSS

 

Теперь перейдем к стилям. Нам необходимо рассмотреть элементы, которым только предстоит появиться, им мы зададим класс animate. В CSS мы анимируем элементы и создаём эффекты:

.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; }
}

Стили достаточно объемные, полный их список можно просмотреть в исходниках.

Шаг 3. JS

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

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

 

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

24 03.2013
Применение анимации для сетки изображений

Скрипт представляет собой нечто вроде плагина. Для чего можно использовать выдвижную панель? Вы можете создать выдвижной блок «Контакты» на сайт, это будет полезно, например, для сайтов с портфолио.


26 03.2013
Применение анимации для сетки изображений

Неприятно, когда ты тратишь несколько часов на то, чтобы написать какую статью, размещаешь ее на своем сайте, а потом она оказывается еще на нескольких ресурсах без указания ссылки на первоисточник. Эти методы не дают стопроцентной гарантии, однако снизить количество подобных случаем помогают. Существуют и другие эффективные средства – защита от копирования текста средствами JavaScript. Использование скриптов помогает затруднить работу копипастерам, заставив их тратить больше времени на копирование контента.


11 05.2017
Применение анимации для сетки изображений

Это модальное окно позволяет пользователям входить / регистрироваться на вашем сайте. После открытия пользователь может легко переключиться с одной формы на другую или выбрать опцию сброса пароля.


02 05.2013
Применение анимации для сетки изображений

Сегодня я расскажу вам, как создавать различные CSS3  эффектов. Мы использовали javascript. В результате страницы галереи у нас будет 9 образов, каждый из которых имеет собственный hover эффект.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close