Большие изображения в шапке сайта часто используются в наши дни в качестве фона для сайта. Они визуально разделяют сайт на несколько важных разделов, при этом пользователи могут сосредоточиться на основных элементах — навигация, текстовая информация и призыв к действию. Изображения, зачастую, служат только визуальным украшением, но сегодня мы рассмотрим как сделать анимационную шапку сайта с эффектом зума и объемности, что будет весьма притягивать взор посетителей.
Чтобы создать такую анимацию нам понадобиться немного трансформаций CSS и немного магии с помощью jQuery. В сегодняшнем отрывке мы создали приятную анимацию, в которой пользователь может сдвигать изображение и увеличивать его с помощью прокрутки, создавая тем самым 3D движение по оси Z (с помощью свойства Z-индекс). Все подробности другого направления, такого как накрутка в соцсетях - смотрите по ссылке.
Шаг 1. HTML
Разметка будет достаточно простой, мы создали раздел section#cd-intro элемент которого обернет в класс наш список:
<section id="cd-intro">
<div id="cd-intro-background"></div>
<div id="cd-intro-tagline"><!-- insert your tagline here --</div>
</section>и установим полную ширину изображения в качестве фона на #cd-intro-background элемента.
Шаг 2. CSS
Для части элементов мы присвоили значение: position:fixed; в разделе section#cd-intro где нам необходимо установить происхождение для CSS3 масштабного преобразования для элемента #cd-intro-background, на значении 50% (ось X) и 100% ( ось Y). Это все, что нужно для эффекта Zoom.
@media only screen and (min-width: 1170px) {
#cd-intro {
position: fixed;
top: 70px;
left: 0;
}
#cd-intro .cd-intro-background {
transform-origin: 50% 100%;
}
}Значение масштабного преобразования будет динамически назначается #cd-intro-background используя JQuery.
Шаг 3. JS
Мы определили значение для triggerAnimation () функции, которая будет служить для запуска масштабных преобразований CSS3 и вписали его в окно прокрутки.
<p>function triggerAnimation(){
if($(window).width()>= MQ) {
$(window).on('scroll', function(){
animations will be smoother
window.requestAnimationFrame(animateIntro);
});
} else {
$(window).off('scroll');
}
}</p>
Мы использовали requestAnimationFrame () для обработчиков событий прокрутки. В принципе, requestAnimationFrame () функция которая дает браузеру команду, что мы хотим чтобы выполнялась анимация, так что браузер может оптимизировать его.
AnimateIntro () функция масштабирует значение #cd-intro-background элемента и меняет прозрачность в зависимости от окна со значением scrollTop () (которая необходима для имитации движения 3D).
