03:33 Эффект волны на 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, и при этом нам не нужно будет указывать параметры ширины и высоты. Она также может быть относительным элементом с определенными параметрами ширины и высоты. Наша волна будет автоматически подстраиваться под высоту обёртки. Вы можете проверить работу, изменяя размеры окна. Изначально у нас будет волна из маленьких миниатюр, которые все будут по-разному повёрнуты:  Для того чтобы добавить изображения и контент, нам понадобится следующий элемент: [img]images/1.jpg[/img] Some titleSome Description При увеличенном просмотре, нам отображается лишь один элемент с классом wd-info-desc:  На данном этапе у нас также будет кнопка выхода из увеличенного просмотра, которая позволит нам вернуться обратно в просмотр маленьких миниатюр. Кликая по одной из средних миниатюр, нам открывается область с контентом. Здесь пользователь может перейти по всем пунктам или кликнуть на «закрыть», чтобы вернуться обратно к просмотру средних миниатюр:  Опции Существует несколько опций, которые вы можете использовать для отображения и анимации волны. 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: Разность углов вращения выше. И начало волны всегда разное. Надеемся, что вам понравился наш маленький эксперимент, и вы найдете его полезным! Смотреть демо | Скачать архивом Внимание! У вас нет прав для просмотра скрытого текста. | |
|
| |
| Всего комментариев: 0 | |
