easing: 'easeInOutExpo',// Эффект анимации
speed: 1000,// Скорость анимации
Можно использовать несколько опций для настройки внешнего вида и анимации волны:
В данном режиме также есть кнопка уменьшения масштаба, которая позволяет вернуться в режим меленьких миниатюр. При нажатии на миниатюре среднего размера открывается окно для вывода дополнительного содержания. Здесь пользователь может перемещаться по всем пунктам или нажать кнопку "х закрыть", что вернет его в режим промотра средних миниатюр.
Элемент с классом wd-info-title выводится для изображения в режиме среднего масштабирования:
<p>Описание</p>
<div class="wd-info-desc">
<h2>Название</h2>
<div class="wd-info-title">
<img src="images/1.jpg" alt="Some Image" />
<div class="wd-element">
Для хранения изображений и содержания используется следующий элемент:
Изначально у нас выводится синусоида с маленькими миниатюрами, повернутыми на случайны угол:
Структура кода HTML состоит из основного контейнера с классом wd-wrapper. В демонстрации он позиционируется абсолютно, поэтому мы его можем растянуть над страницей с помощью свойств left/right/top/bottom без определения высоты и ширины. Но он может иметь и относительное позиционирование с заданными высотой и шириной. Кривая синусоиды автоматически подстраивается под высоту контейнера. В демонстрации можно наблюдать перестройку кривой при изменении размеров окна.
Как действует эффект
Иногда хочется вывести содержание страницы в необычной форме. В данном уроке мы представляем вам эксперимент с уникальной формой размещения изображений - волной. Идея заключается в небольшом повороте и размещении миниатюр на кривой синусоиды. При нажатии кнопки мыши на миниатюре происходит увеличения масштаба до среднего значения. При последующем нажатии кнопки мыши на пункте происходит вывод дополнительного содержания (описание изображения).
Эффект волны для галереи
Эффект волны для галереи
Частная коллекция качественных материалов для тех, кто делает сайты
Эффект волны для галереи
Комментариев нет:
Отправить комментарий