Эффект параллакса для фона сайта

Здравствуйте, друзья! Сегодня будем внедрять эффект параллакса на сайт, а точнее — сделаем фон с параллакс эффектом. Это очень привлекательная фишка и не заметить ее крайне трудно. Бросается в глаза и завораживает. И становится интересно, каким образом реализован такой эффект. Делается это при помощи плагина jQuery. На jQuery есть так же красивое модальное окно. Принцип работы такой, что несколько слоев реагируют на движение курсора мыши и сдвигаются на разное расстояние, из-за чего создается впечатление трехмерного изображения.

Демо

Первое, что нужно сделать, для достижения параллакс эффекта на своем сайте, это подключить 2 файла в раздел head вот таким образом:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.plaxmove.js"></script>

Затем нужно подготовить изображения, которые хотите использовать. Вариантов здесь очень много, можно пофантазировать и придумать что-нибудь оригинальное и красивое. В примере я использовал 3D текст, сделанный в фотошопе. Всего у меня получилось 4 слоя, но можно использовать и больше, хотя достаточно будет 3 или 4. Нужно прописать в CSS пути к картинкам и их размеры примерно так:

1
2
3
4

.layer{background:url(image.png);width:516px;height:105px;}
.layer1{background:url(image1.png);width:512px;height:118px;}
.layer2{background:url(image2.png);width:713px;height:223px;}
.layer3{background:url(image3.png);width:366px;height:179px;}

Теперь на страницу нужно добавить небольшой кусок JavaScript кода, который отвечает за то, в какую сторону и на какой скорости будут смещаться слои. Вот этот код:

1
2
3
4
5
6
7
8

<script type="text/javascript">
$(function(){
	$('.layer').plaxmove({ratioH:0.15,ratioV:0.15})
	$('.layer1').plaxmove({ratioH:0.18,ratioV:0.30})
	$('.layer2').plaxmove({ratioH:0.2,ratioV:0.1})
	$('.layer3').plaxmove({ratioH:0.25,ratioV:0.15})
});
</script>

Эффект параллакса для фона почти готов. Осталось вывести его на странице в виде div блоков вот таким образом:

1
2
3
4

<div class="layer" style="top: 62px; left: 343px;"></div>
<div class="layer1" style="top: 162px; left: 343px;"></div>
<div class="layer2" style="top: 185.05px; left: 404.45px;"></div>
<div class="layer3" style="top: 236.5px; left: 538.6px;"></div>

Этот эффект параллакса корректно работает во всех популярных браузерах и на удивление даже в Internet Explorer версии 7 и 8. Так что можно смело его использовать. Получился кроссбраузерный параллакс эффект. Скачайте пример и разберитесь подробней. Если будет что-то непонятно, то спрашивайте об этом в комментариях, постараюсь помочь. А теперь я вас попрошу поделиться записью в социальных сетях. 🙂 Спасибо.

СКАЧАТЬ