Efekt parallax

W tutorialu pokażę jak zrobić popularny ostatnio na stronach www efekt parallax. To końcowy efekt jaki uzyskamy.
Najpierw należy przygotować odpowiednie obrazki, które będą warstwami w paralaksie. Można przygotować dowolną ilość takich warstw. Ja przygotowałam cztery obrazki: trzy balony i część chmur.

Kod pliku html jest następujący.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Efekt Parallax demo</title>
  <link rel="stylesheet" type="text/css" href="styl.css">
</head>
<body class="parallax">
	<img class="parallax-img" src="balon3.png" alt="" data-vel_x="-0.005" data-vel_y="0.011" data-offset_x="780" data-offset_y="530">
	<img class="parallax-img" src="balon2.png" alt="" data-vel_x="0.005" data-vel_y="0.011" data-offset_x="450" data-offset_y="370">
	<img class="parallax-img" src="balon1.png" alt="" data-vel_x="0.01" data-vel_y="0.04" data-offset_x="570" data-offset_y="430">
	<div class="parallax-img clouds" alt="" data-vel_x="0.052" data-vel_y="0.002" data-offset_x="-500" data-offset_y=""> </div>
	<div id="main-wrapper">
		<h1>Efekt Parallax tutorial</h1>
	</div> 
	<script type="text/javascript" src="jquery-1.11.2.js"></script>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

Wszystkie elementy, które mają się poruszać posiadają klasę parallax-img. Ponadto mają dodatkowe parametry określające prędkość i przesunięcie. Poniżej zawartość pliku css.

@import url(http://fonts.googleapis.com/css?family=Khula);
body {
	font-size: 15px;
	margin: 0;
    padding: 0;
	background: url("bg1.jpg") no-repeat fixed left top rgba(0, 0, 0, 0);
}
.parallax {
	width: 100%;
	height: 100%;
	position: relative;
}
#parallax-cfg {
	display: none;
}
#main-wrapper {
	display:block;
	width: 460px;
	margin: 0 auto;
}
#main-wrapper h1 {
	width: 100%;
	text-align: center;
	display: block;
	font-size: 3.4em;
	font-family: 'Khula';
	color:#cfeef8;
	text-shadow: 2px 2px 0px #011532;
	filter: dropshadow(color=#011532, offx=1, offy=1);
}
.parallax-img {
	position: fixed;
}
.clouds {
	background: url('clouds.png') top left repeat-x;
	width: 300%;
	height: 266px;
	z-index: -1;
}

Zawartość pliku main.js jest następująca.

$('.clouds').attr('data-offset_y', $(window).height());

var default_x = $(document).width()/2 - $('#main-wrapper').width();
var default_y = 50;

$('.parallax-img').each(function () {
	var offset_x = $(this).data('offset_x');
	var offset_y = $(this).data('offset_y');
	$(this).css({"left": default_x+offset_x});
	$(this).css({"top": default_y+offset_y});
});

var scroll_y = $('body').scrollTop();
$(window).mousemove(function(event) {
	move(event);
}); 
$(window).scroll(function(event) {
	move(event);                     
});
$(window).resize(function(event) {
	default_x = $(document).width()/2 - $('#main-wrapper').width();
	move(event);
});
function move(event) {
	var cursor_x = event.pageX;
	var cursor_y = event.pageY;
	$('.parallax-img').each(function () {
		var vel_x = $(this).data('vel_x');
		var vel_y = $(this).data('vel_y');
		var offset_x = $(this).data('offset_x');
		var offset_y = $(this).data('offset_y');
		var new_x = -cursor_x*vel_x + default_x+offset_x;
		var new_y = -cursor_y*vel_y + default_y+offset_y;
		$(this).css({"left": new_x});
		$(this).css({"top": new_y});
	});
}

Najpierw ustalamy pozycję chmur oraz domyślnie położenie elementów (default_x i default_y). Następnie przechodzimy przez wszystkie elementy o klasie parallax-img i ustawiamy ich pozycję na podstawie domyślnego położenia i przesunięcia (offset). Za całą "magię" odpowiada funkcja move odpowiedzialna za poruszanie elementami w zależności od położenia kursora myszy.