Эффект зума шапки сайта с помощью CSS3Большие изображения в шапке сайта часто используются в наши дни в качестве фона для сайта. Они визуально разделяют сайт на несколько важных разделов, при этом пользователи могут сосредоточиться на основных элементах - навигация, текстовая информация и призыв к действию. Изображения, зачастую, служат только визуальным украшением, но сегодня мы рассмотрим как сделать анимационную шапку сайта с эффектом зума и объемности, что будет весьма притягивать взор посетителей.

 

Чтобы создать такую анимацию нам понадобиться немного трансформаций CSS и немного магии с помощью jQuery. В сегодняшнем отрывке мы создали приятную анимацию, в которой пользователь может сдвигать изображение и увеличивать его с помощью прокрутки, создавая тем самым 3D движение по оси Z (с помощью свойства Z-индекс).

Шаг 1. HTML

Разметка будет достаточно простой, мы создали раздел section#cd-intro элемент которого обернет в класс наш список:

и установим полную ширину изображения в качестве фона на #cd-intro-background элемента.

Эффект зума шапки сайта с помощью CSS3

Шаг 2. CSS

Для части элементов мы присвоили значение: position:fixed; в разделе section#cd-intro где нам необходимо установить происхождение для CSS3 масштабного преобразования  для элемента #cd-intro-background,  на значении 50% (ось X) и 100% ( ось Y). Это все, что нужно для эффекта Zoom.

Значение масштабного преобразования будет динамически назначается #cd-intro-background используя JQuery.

Шаг 3. JS

Мы определили значение для triggerAnimation () функции, которая будет служить для запуска масштабных преобразований CSS3 и вписали его в окно прокрутки.

Мы использовали requestAnimationFrame () для обработчиков событий прокрутки. В принципе,  requestAnimationFrame () функция которая дает браузеру команду, что мы хотим чтобы выполнялась анимация, так что браузер может оптимизировать его.

AnimateIntro () функция масштабирует значение #cd-intro-background элемента и меняет прозрачность в зависимости от окна со значением scrollTop () (которая необходима для имитации движения 3D).

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

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