D.iK.iJ / JavaScript примеры / Параллакс (parallax) эффект для сайта [скачать]


Это эффект, когда разные элементы сайта при прокрутке движутся с разной скоростью. В данном примере я решил передвигать фоновый рисунок для придания объема и эффекта 3D.

Как обычно, все вполне кроссбраузерно работает на голом ДжаваСкрипте и поддается разным настройкам. А сам скрипт находится в коде страницы.

Прокрутите страницу вниз!


.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Кстати, есть один забавный фокус с этим параллаксом. Его можно сделать плавнее в IE. Достаточно добавить к стилям CSS: body { -webkit-transition: all 0s; -moz-transition: all 0s; -o-transition: all 0s; transition: all 0s;}

Но и это еще не все! Нужно сделать фиксированный при прокрутке фон и изменить немного функцию параллакса: document.body.style.backgroundPosition = "0px " + (totop()/1.7-totop()) +"px"; и это еще повысит плавность в эксплорере!