Parallax эффекты для сайта. Максимум динамики

Когда я только начинал изучать JavaScript, а было это давно, то в какой-то книжке вычитал, что основное призвание JS – это создание динамики на веб странице. В web 2.0 страницы оживляли всплывающими подсказками (tooltip) и popup формами. Но с появлением такой замечательной вещи как twitter bootstrap все это стало слишком банальным. Ведь нет ничего проще чем прописать класс элементу и получить требуемый эффект. Воистину, bootstrap перевернул мир веб-дизайна. Поэтому появились новые концепции, позволяющие оживить веб страницу еще больше.

Parallax эффект — одна из самых заметных концепций. Используя его вы можете превратить сайт в презентацию, проигрывающуюся при перемотке страницы вниз. Или можете оживить картинку, придав ей панорамности и объема. Это бывает полезно, к примеру, при рекламе товара. Такой эффект применен на сайте посвященном чаю Lipton.

Пример1 Пример2

Российские вебмастера не спешат перенимать опыт зарубежных коллег. Что довольно прискорбно, учитывая конкуренцию на рынке труда. Эта статья призвана пробудить интерес к эффекту Parallax.
Существует целая куча плагинов, позволяющих реализовать этот эффект, но в основном они работают с фоном, а нам нужна работа с несколькими слоями. Поэтому советую вам просмотреть JavaScript библиотеку Skrollr. Она позволяет вытворять просто фантастические вещи, и чтобы ими насладиться в полной мере вам даже не потребуется скачать бесплатно флеш плеер для виндовс 7. Смотреть на Github.

Чтобы эффект применился к какому-либо элементу страницы достаточно прописать в нем свойства data-px. Где px – число пикселей, на котором применяется эффект. К примеру, так: data-500. Также можно использовать конструкции вида data-top:

1	<nodiv data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">Текст</nodiv>

Здесь блок с текстом поменяет фон от синего до красного и поднимется до верха страницы с эффектом вращения. Чтобы эта конструкция заработала, просто подключите к документу файл skrollr.min.js и напишите в <head> такую конструкцию: