Движущийся фон при прокрутке (parallax-scroll) на jQuery для uCoz

5512 просмотров Alan_Writer 27.10.2015

Parallax-Scroll, плагин на JQuery, позволяющий создать элементы с фоном, который при прокрутке ведет себя так, как-будто его свойство background-attachment выставлено наполовину scroll и fixed. То есть фоновое изображение движется медленнее, чем вы прокручиваете страницу, что создает необычный эффект движущегося фона. Плагин отлично работает на Safari и мобильных устройствах, к тому же он совсем небольшой, поэтому не будет лишней нагрузкой для сайта.

Установка плагина

1. Скачайте архив, и в корень файлового менеджера залейте все его содержимое.

2. Рассмотрим пример типичной разметки для создания эффекта Parallax-Scroll.

Код

<div id="pic1" class="bg-holder" data-width="1024" data-height="768">
Первый блок с фоном, к которому применяется эффект Parallax-Scroll.
</div>

<section>
<p>Обычная часть страницы, которая прокручивается с обычной скоростью, здесь может располагаться основной текст.</p>
</section>

<div id="pic2" class="bg-holder" data-width="1024" data-height="768">
Второй блок с фоном, к которому применяется эффект Parallax-Scroll.
</div>

В саму разметку я уже часть ее описания вставил. Единственное что нужно добавить, блоков с фоном и обычных секций с текстом может быть сколько угодно, главное у каждого блока с фоном - должен быть свой уникальный id (pic1, pic2, итд), для каждого из которых в стилях нужно будет указать собственно его фоновую картинку.

3. В <head> вставьте файл стилей, который сперва отредактируйте в соответствии с тем что было написано в конце второго пункта.

Код

4. И последнее, прописываем перед </body> скрипты.

Код

Первый скрипт это основной плагин, его трогать не надо, если не разбираетесь. А второй - это вызов основного плагина, указывающий к какому блоку он должен применять эффект Parallax-Scroll, и с какими основными параметрами (описание параметров указано в самом скрипте).

Вот и все, не забываем комментировать, оценивать и репостить!

Теги: jQuery, прокрутка, Движущийся, parallax-scroll, фон, ucoz