Параллакс

26.11.2013 16:53

Эффект параллакса в контексте игр и сайтов - это, грубо говоря, несколько слоев друг под другом, которые двигаются тем медленнее, чем они дальше от наблюдателя (от самого верхнего слоя).

Такой подход дает ощущение "глубины" плоской картинки.
Так-же появляется возможность сделать перекрытие одних объектов другими, что, при испольовании прозрачности дает необъятные возможности оживления сцены.

В HTML все это чрезвычайно просто делать - делаем несколько div друг под другом за счет абсолютного позиционирования, и разносим их в глубину через z-Index.

А двигать можно JavaScript-ом.

Только, в отличие от игр, в сайтах обычно применяется не такой вот «бесконечный» параллакс, а такой, когда смещение слоев фиксировано.

демо «зима»демо «лето»

Эффект очень подходит для различных PR-сайтов, сайтов-визиток и им подобных, цель которых не контeнт, а визуальное представление.

Для полноэкранного параллакс-эффекта, который сделан в демках упрощенно это выглдяит так:

HTML:

<div class="planes">
	<div class="back"></div>
	<div class="front"></div>
</div>

CSS:

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
 
.planes {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
 
.planes .back,
.planes .front {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
 
.planes .back {
	background-size: cover;
	background-position: 50% 0;
	background-image: url( "back.jpg" );
	background-repeat: no-repeat;
 
	z-index: 10;
 
	margin-left: -5%;
	margin-top: -5%;
	padding: 5%;
 
	overflow: hidden;
}
 
.planes .front {
	background-size: contain;
 
	background-image: url( "front.png" );
	background-repeat: no-repeat;
 
	background-position: 50% 0;
 
	z-index: 20;
}

Как видно из CSS - задний слой back занимает у нас всю возможную ширину / высоту окна + 10% от него и располагается он за окном на расстоянии 5% выше и левее видимого левого верхнего угла этого окна - это дает нам возможность двигать его в любую сторону на величину от 0-5%.

Свойство background-size: cover дает возможность растянуть фоновое изображение по всему размеру блока (не забудьте добавить вендорные префиксы).

JS:

$( function() {
	var $w = $( window );
 
	var $p = $( ".planes" );
	var $b = $p.find( ".back" );
	var $f = $p.find( ".front" );
 
	function setStyle( o, prop, val, units ) {
		o.style[prop] = parseFloat( val ).toFixed( 4 ) + units;
	}
 
	$w.bind( "mousemove touchmove", function( e ) {
		var x, y;
 
		e.preventDefault();
 
		if ( e.type == "touchmove" ) {
			var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			if ( !touch ) return;
 
			x = touch.pageX;
			y = touch.pageY;
		}
		else {
			x = e.pageX;
			y = e.pageY;
		}
 
		var ww = $w.width();
		var hw = Math.floor( ww / 2 );
		var wh = $w.height();
		var hh = Math.floor( wh / 2 );
		if ( x == undefined ) x = hw;
		if ( y == undefined ) y = 0;
 
 
		var shiftX = x - hw;
		var spX = shiftX / hw;
		var shiftY = y - hh;
		var spY = shiftY / hh;
 
		var bX =  spX * 5;
		var fX =  spX * 10;
 
		setStyle( $b[0], "left", bX, "%" );
		setStyle( $f[0], "left",  fX, "%" );
 
		var bY =  spY * 5;
		var fY =  spY * 7;
 
		setStyle( $b[0], "top", bY, "%" );
		setStyle( $f[0], "top",  fY, "%" );
	} );
 
	$w.mousemove();
} );

Стили можно установить и на jQuery, но используется функция setStyle для ускорения этого процесса, плюс она еще оставляет у числа с плавающей запятой только первые 4 знака.

Событие touchmove нужно для устройств с тач-экраном (там можно водить пальцем и наблюдать тот же эффект).

Зная координату, и величину окна по ней считаем отклонение от центра, измеряемое от 0 до 1, а затем умножая на разные множители мы можем варьировать смещение - это и будет наша скорость смещения слоя.

Вот и все, дальше можно делать больше таких слоев, применять к ним различные трансформации и эффекты в зависимости от отклонения (например, в «лете» так вращается солнце).

Скачать parallax.zip

Обе демки одним архивом

скачать

26.11.2013, Protocoder

Den03.10.2015 15:42:17#ответить

Круто, спасибо за исходник.

Написать комментарий