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

Апрель 28, 2013   Александр Маврин   Комментариев нет

Эффект параллаксаЗдравствуйте, друзья! Сегодня будем внедрять эффект параллакса на сайт, а точнее — сделаем фон с параллакс эффектом. Это очень привлекательная фишка и не заметить ее крайне трудно. Бросается в глаза и завораживает. И становится интересно, каким образом реализован такой эффект. Делается это при помощи плагина 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. Так что можно смело его использовать. Получился кроссбраузерный параллакс эффект. Скачайте пример и разберитесь подробней. Если будет что-то непонятно, то спрашивайте об этом в комментариях, постараюсь помочь. А теперь я вас попрошу поделиться записью в социальных сетях. 🙂 Спасибо.

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *