Эффект уменьшения масштаба на jQuery

Сегодня ресурс представляет собой полноразмерное изображение заголовка, анимированное с использованием свойства масштаба 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-движение).

 

Вот и всё!


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!