Простой параллакс эффект на сайте и важные нюансы его исполнения

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

В качестве примера представлен вертикальный параллакс для «короткой» страницы.
Данный подход очень хорошо придает эффект третьего измерения, что можно очень интересно обыграть.
Фактически, если сайт многостраничный, и оформление каждой страницы сделать уникальным, то будет очень похоже на детскую книжку — раскладушку (помните такие, с объемными бумажными папье-маше, появляющимися на разворотах?).

В качестве примера был взят промо-сайт одного из выходящих в прокат фильмов.
Технически, весь смысл — в различной дельте при приращении координат, что дает эффект разной скорости скроллинга разных слоев, однако, кроме этого хочу обратить ваше внимание на следующие детали, учтенные в примере, но учтенные не полностью:
— Разные изображения лежат на разных слоях. Это, конечно, очевидно, но само по себе не даст полной «кинематографичности» и глубины общему виду страницы.
— Разные слои движутся с разной скоростью. Чем «ближе» слой, тем быстрее он движется.

А теперь главное:
— Глубина резкости. Чем «глубже» слой, тем он более размытый. Т.е. изображения каждого следующего слоя (в глубину), нужно блурить на определенный процент, в зависимости от конкретной сцены. При этом изображения, находящиеся на одном слое должны иметь одинаковую степень четкости (размытия). Например, человек на переднем плане — максимальная четкость, а горная гряда на самом дальнем — размыта на 40%. В примере этот эффект применен только к банкнотам.
— Тени. Если ваша сцена — не простая аппликация, и вы стремитесь сделать этакую 3D-фотографию, не забывайте о тенях. Каждый слой должен отбрасывать тень на следующий. Для наибольшей реалистичности тени должны быть правдивыми — от одного источника света.
— Свет. Если сцена — что-то вроде вечернего группового фото в стиле Чикагской мафии, со стоящей рядом машиной, у которой включены фары, — свет от фар нужно правильно отобразить на всех изображениях сцены.
— Перспектива. Обратите внимание, что объекты примерно одного размера (в данном случае — люди, фишки) на разных слоях, по мере удаления, уменьшаются. Т.е. объекты переднего плана — крупные, а чем глубже, тем мельче. Например, люди примерно одного роста на разных слоях должны заметно отличаться в размерах.

Данный эффект можно использовать на сайте-визитке фотографа и представлять его работы в виде псевдо-3D-фото. Это, конечно, потребует некоторой работы над снимками. Однако, можно отснять сцены для сайта специально, слой за слоем, с разной глубиной резкости и одинаковым освещением.

Посмотреть пример можно здесь.

Ниже привожу полный JS код, отвечающий за данный эффект в примере:

$(function() {  	if ($('body').hasClass('index')) { 		var $money2Top = $('.money2').position().top 		var $money3Top = $('.money3').position().top 		var $chips1Top = $('.chips1').position().top  		function scroller(){  			scrollTop = $(window).scrollTop();  			function newPosBG (x, scrollTop, adjuster, inertia){ 				return x + "% " + (-(scrollTop - adjuster) * inertia)  + "px"; 			} 			function newPosTop (start, scrollTop, adjuster, inertia){ 				return (start-(scrollTop - adjuster) * inertia)  + "px"; 			} 			function newBottomHeight (start, scrollTop, adjuster, inertia){ 				return (start+(1-(delta-scrollTop)/delta) * inertia)  + "px"; 			}  			$('.money2').css({'top': newPosTop($money2Top, scrollTop, 0, 0.2)}); 			$('.money3').css({'top': newPosTop($money3Top, scrollTop, 0, 0.1)}); 			$('.chips1').css({'top': newPosTop($chips1Top, scrollTop, 0, 0.1)});  			var delta = $('body').height() - $(window).height(); 			if (delta > 0){ 				$('.bottom-photo1').css({'height': newBottomHeight(445, scrollTop, delta, 70)}); 				$('.bottom-photo2').css({'height': newBottomHeight(355, scrollTop, delta, 40)}); 				$('.bottom-photo3').css({'height': newBottomHeight(331, scrollTop, delta, 19)}); 				$('.bottom-photo4').css({'height': newBottomHeight(330, scrollTop, delta, 19)}); 				$('.bottom-photo5').css({'height': newBottomHeight(355, scrollTop, delta, 40)}); 				$('.bottom-photo6').css({'height': newBottomHeight(385, scrollTop, delta, 70)}); 				$('.ticket').css({'height': newBottomHeight(290, scrollTop, delta, 10)}); 			} 		}  		$(window).resize(function(){ 			scroller();  		});  		$(window).on('scroll', function(){  			scroller(); 		}); 	}  }); 

Скачать пример (рабочая страница примера с изображениями), 1.6 Mb