%d0%bf%d0%b0%d1%80%d0%b0%d0%bb%d0%bb%d0%b0%d0%ba%d1%81-%d1%81-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d0%be%d0%bc-%d1%83%d0%b2%d0%b5%d0%bb%d0%b8%d1%87%d0%b5%d0%bd%d0%b8%d1%8f-%d1%81-%d0%bf%d0%be%d0%bcПараллакс весьма интересная тема для наших читателей и мы не могли пройти ее стороной, в данном уроке мы рассмотрим достаточно простой способ реализации параллакса, а именного эффект увеличения шапки страницы с движением при прокрутки вниз. Смотрится такой эффект достаточно оригинально и визуально оживляет страницу, реализовать его тоже не составит труда. Для реализации нам понадобиться всего навсего несколько простых правил оформленных все это в обыкновенные стили. Получилось достаточно красиво.

 

Такие эффекты стали весьма популярны в последнее время, известные ресурсы как Facebook и Vk стали использовать в шапках профилей большие изображение. Можно сказать что они задают тренд на данный прием. Давайте же посмотрим как это реализовано.

Шаг 1. HTML

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

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

%d0%bf%d0%b0%d1%80%d0%b0%d0%bb%d0%bb%d0%b0%d0%ba%d1%81-%d1%81-%d1%8d%d1%84%d1%84%d0%b5%d0%ba%d1%82%d0%be%d0%bc-%d1%83%d0%b2%d0%b5%d0%bb%d0%b8%d1%87%d0%b5%d0%bd%d0%b8%d1%8f-%d1%81-%d0%bf%d0%be%d0%bc

Шаг 2. CSS

Теперь давайте перейдем к стилям, большая часть стилей используется для демонстрации, по этому мы отобразим только те стили, которые нужны нам для зума.

Шаг 3. JS

Теперь нам необходимо реализовать то, что отвечает за весь эффект, а именно добавить функции js, нам необходимо указать, процентное соотношение на сколько изображение будет увеличиваться.

Трансформация получилась простой но эффектной для посетителя, что и требовалось от нас в данном уроке.

Вот и все. Готово!

Читайте также: