Зум-аут эффект

demosourse

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

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

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

Источник вдохновения: Anchor Travel.

Создание структуры

Элемент 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.

Стили

При просмотре на больших экранах выставим элементу section#cd-intro position:fixed;; выставим CSS3 свойство scale элементу #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%;
  }
}

Значение для трансформации будет автоматически вычисляться через jQuery и присваиваться элементу #cd-intro-background.

Обработка событий

Определяем функцию triggerAnimation() для запуска CSS3 трансформации.

function triggerAnimation(){
	if($(window).width()>= MQ) {
		$(window).on('scroll', function(){
			window.requestAnimationFrame(animateIntro);
		});
	} else {
		$(window).off('scroll');
	}
}

Используем метод requestAnimationFrame() для обработки события прокрутки страницы.

Функция animateIntro() масштабирует элемент #cd-intro-background, а так же изменяет значение свойства opacity в зависимости от значения scrollTop() (для имитации 3D движения).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/pull-out-intro-effect/
Перевел: Станислав Протасевич
Урок создан: 22 Февраля 2016
Просмотров: 8075
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^