Сегодня ресурс представляет собой полноразмерное изображение заголовка, анимированное с использованием свойства масштаба CSS3 и jQuery для имитации эффекта 3D-уменьшения и отображения основного содержимого страницы.
Большие образы заголовков часто используются в эти дни в качестве фона для слогана сайта. Они охватывают раздел «Введение», пользователи могут сосредоточиться на 2-3 основных элементах - меню, сообщении и кнопке «призыв к действию» - тогда, если это будет интересно, они могут прокручивать вниз и узнавать больше. Изображение в основном является визуальным украшением.
В сегодняшнем фрагменте мы создали красивую анимацию, которая уменьшает область изображения во время прокрутки пользователя, создавая тем самым фальшивое трехмерное движение по оси Z (с помощью свойства z-index
).
Создание структуры
Мы создали элемент секции #cd-intro
, чтобы обернуть наше изображение и tagline
/ message
<section id="cd-intro">
<div id="cd-intro-background"></div>
<div id="cd-intro-tagline"><!-- insert your tagline here --></div>
</section>
И установим наше изображение полной ширины в качестве фона элемента #cd-intro-background
.
Добавление стиля
На настольной версии мы назначили позицию: fixed
; В раздел #cd-intro
и установите начало преобразования масштаба CSS3 для элемента #cd-intro-background
, который должен быть 50% (ось X) и 100% (ось Y). Это все, что нам нужно, чтобы эффект уменьшения масштаба работал.
@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.
Обработка событий
Мы определили функцию triggerAnimation ()
для запуска преобразований масштаба CSS3 и привязали ее к прокрутке окна.
function triggerAnimation(){
if($(window).width()>= MQ) {
$(window).on('scroll', function(){
//The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
window.requestAnimationFrame(animateIntro);
});
} else {
$(window).off('scroll');
}
}
Мы использовали requestAnimationFrame ()
для обработчиков событий прокрутки. В принципе, метод requestAnimationFrame ()
сообщает браузеру, что мы хотим выполнить анимацию, чтобы браузер мог ее оптимизировать.
Функция animateIntro ()
масштабирует элемент #cd-intro-background
и изменяет его непрозрачность в соответствии со значением окна scrollTop ()
(чтобы имитировать 3D-движение).