Автор

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

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

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


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

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


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

Слайдеры заполонили сайты, это и не удивительно, ведь в него можно вставить множество информации, которая вращая будет привлекать пользователя. Но простой слайдер это слишком банально, и их так много, что придумать что-то новое уже становиться сложновато. Параллакс это весьма интересный эффект, с каждым днем ресурсов с данным эффектом становится все больше, ведь он позволяет создать эффект объемности. В данном уроке мы совместим эти два элемента, и создадим замечательный резиновый слайдер с эффектом параллакса.


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

Порой на сайте хочется выделить красиво какую либо информацию, тем самым привлечь внимание пользователя к необходимой информации. Все это можно сделать с помощью различных эффектов, в данном уроке мы рассмотрим как создать эффект размытия элементов сайта сайта с помощью CSS3 и jQuery.  Идея заключается в организации набора блоков с текстом, которые будут размываться и уменьшаться в масштабе при наведении курсора мыши на один из них. Блок, который получает фокус ввода, наоборот будет увеличиваться.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close