• Zoom Slider

    Блог

    Персональный блог

Zoom Slider

Zoom Slider

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

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

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

CSS

JavaScript

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

Автор: Mary Lou

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

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

Свяжитесь со мной

Используйте эту форму, чтобы рассказать мне о целях и потребностях вашего проекта.

[contact-form-7 404 "Not Found"]