В данном уроке мы покажем вам как очень просто организовать при прокрутке эффект параллакса.

Чтобы подключить эффект параллакса нам необходима библиотека JQuery версии 1.11.3 (jquery-1.11.3.min.js), но эффект также может работать как при новых библиотеках, так и старых.

После подключения JQuery следом подключаем скрипт parallax.min.js

Далее выбираем любой блок например: header, section, div, footer - это обсалютно не важно

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

На этом все! Видите как все просто! Можете посмотреть Демо