Хаки и Скрипты Next Generation CMS

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

irbees2008 irbees2008 Опубликовано - 7 - октября Изображения
9147 - 2
  • Автор: не знаю
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

В последнее время стали появляться сайты с удивительным эффектом параллакса, который создает иллюзию трехмерности изображений.
Сегодня установим фон с эффектом паралакса
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 — инвертирование движения мыши по вертикали
Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.
Для изменения используйте настройки и стили,ну и свои изображения.

Можешь почитать и вот эту статейку "Теги iframe"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4493 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 671
  • Онлайн всего: [31]
  • Гости: [30]
  • Поисковики: [1] Google
  • Были сегодня : [5] Google, Яндекс, dankeanke, ????????? ?????, irbees2008
  • SQL запросов: 30
  • Генерация страницы: 0.286сек
  • Потребление памяти: 5.403 Mb 
  •   Яндекс.Метрика