Новогодний параллакс-эффект с jQuery

Karina | 11.12.2014

Параллакс-эффект сегодня необычайно популярен и обсуждаем. Мы не останемся в стороне и сегодня покажем вам, как можно легко украсить сайт таким эффектом, а в преддверии Нового года тематика выбрана соответствующая. Вы запросто сможете использовать этот пример для реализации собственных идей, которые не обязательно должны быть посвящены новогодней тематике. Приступим!

Демо Загрузить архив RAR (240 kB)

Часть HTML

HTML здесь очень простой – всего один блок div с классом forest и вложенные в него шесть блоков с элементами, которым, в свою очередь, также присвоены классы и указан коэффициент смещения.

<div class="forest">
	<div data-offset="80" class="snowflakes parallax"></div>
	<div data-offset="40" class="snowflakesback parallax"></div>
	<div data-offset="50" class="trees parallax"></div>
	<div data-offset="30" class="treesback parallax"></div>
	<div class="snow"></div>
	<div class="ground"></div>
</div>

Часть CSS

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

body {
	background: url(../img/background.png);
	overflow:hidden;
}

.forest {
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	border-bottom: 50px solid #EEEDED;
	height:900px;
	overflow:hidden;
}

.forest > div {
	position:absolute;
	bottom:0;
}

.ground {
	width:100%;
	height:30px;
	background:#FFF;
	z-index:999;
}

.forest div.snow {
	width:1400px;
	height:37px;
	left:50%;
	bottom:20px;
	margin-left:-710px;
	background:url(../img/snow.png) no-repeat center;
	z-index:999;
}

.forest div.snowflakes {
	width:1400px;
	height:800px;
	left:50%;
	top:5px;
	margin-left:-710px;
	background:url(../img/snowflakes.png) no-repeat center;
	z-index:999;
}

.forest div.snowflakesback {
	width:1400px;
	height:800px;
	left:50%;
	top:1px;
	margin-left:-710px;
	background:url(../img/snowflakes-back.png) no-repeat center;
	z-index:1;
}

.forest div.trees {
	width:763px;
	height:285px;
	left:50%;
	margin-left:-398px;
	background:url(../img/christmas-trees.png) no-repeat center;
	z-index:100;
}

.forest div.treesback {
	width:763px;
	height:285px;
	left:50%;
	margin-left:-398px;
	background:url(../img/christmas-trees-back.png) no-repeat center;
	z-index:2;
}

Часть jQuery

Третий шаг – скрипт анимации, которая будет срабатывать при движении курсора. Не забудьте подключить библиотеку jQuery.

$(window).on('mousemove', function(e) {
	var wh = $(window).width();
	var ht = $(window).height();
	var offsetX = 0.5 - e.pageX / wh;
	var offsetY = 0.5 - e.pageY / ht;

	$(".parallax").each(function(i, el) {
		var offset = parseInt($(el).data('offset'));
		var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)";

		$(el).css({
			'-webkit-transform': translate,
			'transform': translate,
			'moz-transform': translate
		});
	});
});

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