Zoom Slider

Zoom Slider

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

HTML

CSS

JavaScript

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

Автор: Mary Lou

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

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

Комментарии Facebook:

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

  1. Сергей

    Отличная вещь, хочу попробовать на своем сайте организовать, как пример моих работ

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree