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

Публикуем реализацию очень простого Parallax эффекта при прокрутке страницы. Данный parallax эффект не только очень прост в установке и настройке, но и сам по себе скрипт параллакса небольшой и не нуждается в дополнительных настройках. Работает данный скрипт при подключенной библиотеки jQuery.

 

ДЕМО
ИСХОДНИКИ

 

подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery.
В архиве версия jQuery — jquery-1.11.3.min.js Но данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверял!

Поэтому подключаем к HTML документу сначала jQuery, а после сам скрипт parallax.min.js

Выглядит подключение вот так:

Ну а теперь 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 эффектом, в данном случае заголовок.

 

Вот и всё

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!