Сегодня 13 мая, понедельник

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Хаки и Скрипты Next Generation CMS / Запись в блоге

	Хаки и Скрипты Next Generation CMS Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888

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

2013-10-07 00:21:33 (читать в оригинале)

В последнее время стали появляться сайты с удивительным эффектом параллакса, который создает иллюзию трехмерности изображений.
Сегодня установим фон с эффектом паралакса
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам background-site-effect-parallax-jquery.zip (720.74 Kb)[/is-logged],распаковываем в папку с шаблоном.
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,, изображениями,, эффекты

Блограйдеров
14489

Блогов
219902
(+0 сегодня)

Сообществ
1309
(+0 сегодня)

ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»

Категория «Истории»

Взлеты Топ 5


+1920	1940	Дрочливый_Драчун
+1899	1946	Коптящий_Небо
+1891	1957	Da_Queen_of_Da_World
+1873	1964	Splash_Phantom
+1754	1777	jolly_M

Падения Топ 5


-1	1270	Выдающиеся женщины
-1	829	Работа в интернете
-1	1180	Вкусное меню
-2	84	xpyctal
-2	1062	TradeIP

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.