Qudrat Qodirov

Zoom Slider12 min read

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

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

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

CSS

JavaScript

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

Автор: Mary Lou

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

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

Обсуждение закрыто.

%d такие блоггеры, как: