07 Oct 2013, 02:21 avatar

Фон сайта с эффектом параллакса на jQuery плагине jquery.plaxmove

  1. Автор: не знаю
  2. Адаптировал: irbees2008
  3. Уровень сложности исполнения:нужны навыки css hmlt
  4. Демо: в новом окне
В последнее время стали появляться сайты с удивительным эффектом параллакса, который создает иллюзию трехмерности изображений.
Сегодня установим фон с эффектом паралакса
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем в папку с шаблоном.
2.В хеад подключаем скрипты,если у вас не подключен jquery,то подключайте и его тоже :
Код:
 <--script src="{tpl_url}/js/jquery.js" type="text/javascript"></script-->
<script src="{tpl_url}/js/jquery.plaxmove.js" type="text/javascript" ></script>
3.В стили добавляем :
Код:
 .layer1{background:url(layer1.png);width:100%;height:100%;top:0px;left:0px}
.layer2{background:url(layer2.png);width:100%;height:100%;top:0px;left:0px}
.layer3{background:url(layer3.png);width:100%;height:100%;top:0px;left:0px}
4.Добавляем сам фон в тело сайта:
Код:
 
<div class="layer1" style="top: 13px; left: 48.225px; "></div>
<div class="layer2" style="top: 25.05px; left: 94.45px; "></div>
<div class="layer3" style="top: 36.074999999999996px; left: 138.6px; "></div>
5.И последнее инициализация :
Код:
 <script type="text/javascript">
$(function(){
$('.layer1').plaxmove({ratioH:0.05,ratioV:0.05})
$('.layer2').plaxmove({ratioH:0.1,ratioV:0.1})
$('.layer3').plaxmove({ratioH:0.15,ratioV:0.15})
});
</script>
6.Настройки
ratioH — модификатор движения мыши по горизонтали
ratioV — модификатор движения мыши по вертикали
reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
invertH — инвертирование движения мыши по горизонтали
invertV — инвертирование движения мыши по вертикали
Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.
Для изменения используйте настройки и стили,ну и свои изображения.
Можешь почитать и вот эту статейку "Эффект прозрачности на CSS"

mistakes

2 комментариев

irbees2008
249893,хотел спросить?

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.