Хаки и Скрипты Next Generation CMS : Изображения, CSS, JS : Фон сайта с эффектом параллакса на jQuery плагине jquery.plaxmove

irbees2008 Опубликовано - 7 - октября Изображения

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

Можешь почитать и вот эту статейку "3D карусель на bootstrap"

Это тоже интересно

249893 19.10.2014 - 07:38

ответить

irbees2008 21.10.2014 - 02:55 249893,хотел спросить?

ответить

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