Zoom Slider

Zoom Slider

От автора: простой слайдер контента с эффектом зума в предопределенных областях для каждого слайда.

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

скачать исходникидемо

При нажатии на стрелки навигации внутренние секции слайда оживают, причем, изображения и заголовок ведут себя независимо друг от друга. Для анимации компонентов слайда мы используем CSS свойство transition и dynamic.js. Dynamic.js от Michaël Villar это JavaScript библиотека, позволяющая создавать анимацию основанную на законах физики.

Заметьте, что мы используем несколько современных свойств CSS, которые поддерживаются только современными браузерами.

HTML

CSS

JavaScript

Посмотреть проект на GitHub

Автор: Mary Lou

Источник: //tympanus.net/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (1)