Простой Parallax эффект при прокрутке страницы

Здравствуйте, публикую реализацию очень простого 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>

Ну а теперь 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;
}

Теперь по коду:

class="parallax" — любой класс, об этом написано выше.
<h2>section class="parallax"</h2> — надпись внутри блока с parallax эффектом, в данном случае заголовок.

Рекомендую вместе с данным эффектом параллакса применять плавный эффект при прокрутке страницы.

— Вроде все. Возникнут затруднения спрашивайте в комментариях.

Кордицепс китайский гриб польза muhomor.pro.

Похожие по Тегам статьи

Создание Video Background HTML 5

В данной статье идет речь о создании video background — фоновой видео заставки HTML 5 веб страницы

Оформление текста в HTML — Выноски Callout

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя…

Слайдер Bootstrap Ken Burns Effect Carousel

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта….