—»     —»   Эффект волны на jQuery
  Раздел: Анимация, Руководства   Комментариев: 1  

Эффект волны на jQuery



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

В демо используются изображения от Криса Уиллиса (Chris Willis). Они распространяются под лицензионным соглашением Attribution 2.0 Generic (CC BY 2.0) License.

Иконки от WPZOOM (распространяются под лицензионным соглашением Attribution-ShareAlike 3.0 Unported License); вы можете скачать их отсюда:
WPZOOM: набор иконок для разработчиков (154 бесплатные иконки)

Автором привлекательного слайдера является Орман Кларк (Orman Clark) из premiumpixels.com

Как это работает

Структура HTML будет состоять из основной обёртки с заданным классом wd-wrapper. В демо позиционирование установлено на absolute, а значит, мы можем растянуть обертку на всю страницу посредством применения значений left/right/top/bottom, и при этом нам не нужно будет указывать параметры ширины и высоты. Она также может быть относительным элементом с определенными параметрами ширины и высоты. Наша волна будет автоматически подстраиваться под высоту обёртки. Вы можете проверить работу, изменяя размеры окна.

Изначально у нас будет волна из маленьких миниатюр, которые все будут по-разному повёрнуты:

Эффект волны на jQuery

Для того чтобы добавить изображения и контент, нам понадобится следующий элемент:

<div class="wd-element">
<img src="images/1.jpg" alt="Some Image" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Some title</h2>
</div>
<div class="wd-info-desc">
<p>Some Description</p>
</div>
</div>
</div>

При увеличенном просмотре, нам отображается лишь один элемент с классом wd-info-desc:

Эффект волны на jQuery

На данном этапе у нас также будет кнопка выхода из увеличенного просмотра, которая позволит нам вернуться обратно в просмотр маленьких миниатюр. Кликая по одной из средних миниатюр, нам открывается область с контентом. Здесь пользователь может перейти по всем пунктам или кликнуть на «закрыть», чтобы вернуться обратно к просмотру средних миниатюр:

Эффект волны на jQuery

Опции

Существует несколько опций, которые вы можете использовать для отображения и анимации волны.

speed                : 1000,
// скорость анимации

easing : 'easeInOutExpo',
// свобода анимации

minImgW : 50,
// минимальная ширина миниатюры (любое значение)

maxImgW : 90,
// максимальная ширина миниатюры (любое значение)

minImgAngle : -15,
// минимальный угол вращения миниатюры (любое значение)

maxImgAngle : 15,
// максимальный угол вращения миниатюры (любое значение)

leftFactor : 40,
// расстояние между изображения по оси Х

startFactor : 1,
// чем выше данное значение, тем больше расстояние между первой миниатюрой и левой стороной контейнера

sinusoidFunction : {
A : 100, // амплитуда
T : 700, // период
P : 0 // фаза
}

Демо

Мы подготовили 4 демо, в каждом из которых используются разные значения:

Default: в данном демо мы отображаем волну со стандартными опциями
Demo 2: миниатюры немного больше, амплитуда волны меньше, а периодичность выше, что делает волну более плавной.
Demo 3: Здесь мы установили размеры миниатюр, где установлены почти одинаковые размеры и некоторые немного меньше. Скорость и свобода анимации также отличается.
Demo 4: Разность углов вращения выше. И начало волны всегда разное.

Надеемся, что вам понравился наш маленький эксперимент, и вы найдете его полезным!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 9510   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 февраля 2012 @ 13:00
Написал: Лера — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошая интересная статья. Спасибо за Демо, будем пробовать.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930