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> вставьте файл стилей, который сперва отредактируйте в соответствии с тем что было написано в конце второго пункта.
Код
<link rel="stylesheet" href="/parallax-scroll/style.css"/>
4. И последнее, прописываем перед
</body> скрипты.
Код
<script src="/parallax-scroll/parallax-scroll.js"></script>
<script src="/parallax-scroll/demo.js"></script>
Первый скрипт это основной плагин, его трогать не надо, если не разбираетесь. А второй - это вызов основного плагина, указывающий к какому блоку он должен применять эффект Parallax-Scroll, и с какими основными параметрами (описание параметров указано в самом скрипте).
Вот и все, не забываем комментировать, оценивать и репостить.
Скачать архив: https://cloud.mail.ru/public/KWHL/TeAYSk8uZ