Я думаю, мы все согласны с тем, что когда кто-то видит эффект параллакса на сайте, он не может сдержать возглас удивления. И в самом деле, этот эффект притягивает и завораживает. Хочется сразу включить firebug чтобы посмотреть как же оно работает. Сегодня мы разберем с вами очередной параллакс-эффект, но уже написанный на JQuery.
Картинки для параллакса
Вам понадобится фоновые изображения для нашего параллаксового баннера. Я решил взять 4 изображения, но это не предел. Используйте сколько захотите. Обратите внимание, что в нашем примере картинки под номерами 2,3,4 - изображения с прозрачным фоном в png-24 формате):
- Слой 1
- наш фон
- Слой 2
- трава
- Слой 3
- лягушка-квакушка
- Слой 4
- бабочки
Для редактирования векторных файлов вам понадобится графический редактор, например Adobe Illustrator или Photoshop.
Пишем код
Вам понадобится плагин jparallax, jquery.event.frame и последняя версию JQuery, которые вам нужно будет подключить в вашей web-странице.
Плагин jparrallax.js может уже содержать методы jquery.event.frame.js. Если так, то jquery.event.frame.js можно не подключать.
<script src="js/jquery.min.js"></script>
<script src="js/jquery.jparallax.min.js"></script>
<script src="js/jquery.event.frame.js"></script>
Теперь мы добавляем изображения с помощью HTML кода. Наша разметка будет вот такой:
<section id="parallax" class="clear">
/* трава */
<div class="parallax-layer" style="width:1200px; height:250px;">
<img src="images/grass.png" />
</div>
/* лягушка-квакушка */
<div class="parallax-layer" style="width:500px; height:250px;">
<img src="images/frog2.png" />
</div>
/* бабочки */
<div class="parallax-layer" style="width:1200px; height:300px;">
<img src="images/butterflies3.png" />
</div>
</section>
Затем добавьте код JQuery для инициализации плагина параллакса:
<script>
$(function() {
$('#parallax .parallax-layer')
.parallax({
mouseport: $('#parallax')
});
});
</script>
Кроме того, нам необходимо написать стили CSS, необходимые для параллакса:
#parallax {
position:relative;
overflow:hidden;
width:950px;
height:250px;
background-image:url('background.jpg');
}
.parallax-viewport {
position: relative; /* relative, absolute, fixed */
overflow: hidden;
}
.parallax-layer {
position: absolute;
}
Заключение
Дети паралаксового элемента становятся слоями, и для них автоматически устанавливается position:absolute;
чтобы запустить движение слоев, но сам паралаксовый эффект требует position:relative;
или position:absolute;
иначе слои будут двигаться относительно документа, а не области просмотра. overflow:hidden;
препятствует отображению слоев за пределами области просмотра. Нужно также установить ширину и высоту, чтобы окно просмотра не развалилось.
Совет: поиграйте с размерами слоев ваших изображений, чтобы получить ту скорость анимации, которую вы хотите. Чем меньше изображение по сравнению с фоновым слоем, тем быстрее оно будет двигаться при перемещении курсора мыши. Лягушка перемещается только влево и вправо, это достигается за счет того, что это изобраджение имеет такую же высоту, что и окно, но меньшую ширину. Бабочки же наоборот, поэтому они могут двигаться вверх и вниз.
На этом все. Надеюсь, что вы как следует повеселитесь во создания собственных анимированных параллакс-баннеров на JQuery!