Здравствуйте, публикую реализацию очень простого Parallax эффекта при прокрутке страницы. Данный parallax эффект не только очень прост в установке и настройке, но и сам по себе скрипт параллакса небольшой и не нуждается в дополнительных настройках. Работает данный скрипт при подключенной библиотеке jQuery, которая используется практически во всех современных CMS и продающих страницах.
Пример использования и ссылка на исходник Parallax эффекта
В архиве находится все необходимое для реализации данного parallax эффекта у себя в проектах.
— Если возникнут затруднения в установке скрипта, пишите в комментариях, объясню что куда подключать.
Подробнее о подключении Parallax эффекта к сайту
Как я писал выше, подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery.
В архиве версия jQuery — jquery-1.11.3.min.js
Но данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверял!
Поэтому подключаем к HTML документу сначала jQuery
, а после сам скрипт parallax.min.js
Выглядит подключение вот так:
<script src="js/jquery-1.11.3.min.js"></script> <script src="js/parallax.min.js"></script>
На WP jQuery подключать не нужно
На WordPress по умолчанию уже подключена библиотека jQuery, поэтому подключайте только скрипт parallax эффекта parallax.min.js. Советую подключать скрипты, как написано в статье — подключение скриптов на WordPress
Ну а теперь HTML CSS подключение параллакса
Берите блок, это может быть header
, section
, div
, footer
.
Блок div
, в частности, называйте любым классом, и присваивайте:
width: 100%
min-height: 400px;
Хотя это не принципиально.
Выглядит все это так:
HTML
<div class="parallax" data-parallax="scroll" data-image-src="img/bg_4.jpg"> <h2>section class="parallax"</h2> </div>
CSS
.parallax { min-height: 400px; background: transparent; }
Теперь по коду:
Обязательные атрибуты параллакса
data-parallax="scroll"
— нужен для срабатывания скрипта;
data-image-src="img/bg_4.jpg
— картинка, точнее путь к картинке;
На странице разработчика указан полный список атрибутов.
class="parallax"
— любой класс, об этом написано выше.
<h2>section class="parallax"</h2>
— надпись внутри блока с parallax эффектом, в данном случае заголовок.
Рекомендую вместе с данным эффектом параллакса применять плавный эффект при прокрутке страницы.
— Вроде все. Возникнут затруднения спрашивайте в комментариях.
Кордицепс китайский гриб польза muhomor.pro.
Спасибо, классная штука 🙂
Нужно взять себе на заметку.
Мне он понравился тем, что, легкий в установке и сам скрипт небольшой. А то параллаксы посложнее, с таким эффектом, там несколько скриптов, плюс библиотека.