Главная » Файлы » Прочие скрипты » jQuery

Стильная современная осенняя вставка с Parallax эффектом для uCoz
[ Скачать с сервера (598.7 Kb) ] 06.10.14, 23:07:07



Очень необычная вставка на осеннюю тематику для вашего сайта. Параллакс эффект очень здорово применён и данное решение довольно-таки кстати впишется в дизайн вашего сайта

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
#container {
  width:100%;
  margin:auto;
  position: relative;
  height:52px;
  overflow:hidden
}

.background {
  z-index:1;
}

.forest {
  z-index:2;
}

.title {
  z-index:3;
}

.flowers {
  z-index:4;
}

.blur_flowers {
  z-index:5;
}

.background, .forest, .flowers, .blur_flowers, .title {
  position:absolute;
}


Следующий код туда, где хотите видеть данную вставку:
Код
<script type='text/javascript' src="/js/jquery.zlayer.min.js"></script>
<div id="container">
  <img class="background" src="http://imapo.ru/img/00.jpg" width="2560" height="52" style="top: 0px;">
  <img class="forest" src="http://imapo.ru/img/01.png" width="2560" height="52" style="top: 0px; left: 3px;">
  <div align="center" class="title" style="width: 2560px; height: 52px; top: 0px; left: 12px;">Здесь любой ваш текст</div>
  <img class="flowers" src="http://imapo.ru/img/02.png" width="2560" height="52" style="top: 0px; left: 18px;">
  <img class="blur_flowers" src="http://imapo.ru/img/03.png" width="2560" height="52" style="top: 0px; left: 66px;">
</div>
<script>
$(document).ready(function () {
  $('.background').zlayer({
  mass: 0,
  confine: 'y',
  canvas: 'body'
  });
  $('.forest').zlayer({
  mass: 125,
  confine: 'y',
  canvas: 'body'
  });
  $('.title').zlayer({
  mass: 40,
  confine: 'y',
  canvas: 'body'
  });
  $('.flowers').zlayer({
  mass: 27,
  confine: 'y',
  canvas: 'body'
  });
  $('.blur_flowers').zlayer({
  mass: 8,
  confine: 'y',
  canvas: 'body'
  });
});
</script>


Скрипт из прикреплённого архива залейте в папку js, а картинки в папку img

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: Осенняя, Parallax, ucoz, Современная, эффектом, вставка, стильная, для
Просмотров: 538 | Загрузок: 153 | Комментарии: 3 | Рейтинг: 1.0/2
Всего комментариев: 3
0
Круто! Давно искал многослойный параллакс)

0
Ну теперь ты его нашёл  happy

0
На днях запилю себе.
А разные другие параллаксы фиговые, в попу)

Имя *:
Email: