Делаем эффект параллакса для заднего фона на сайте

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.

Этот кусочек скрипта привязывает нас к событию onscroll окна. Мы каждый раз считываем текущую позицию и вычисляем смещение фона.

Надо только не забыть, что положение фона у нас фиксировано. Иначе, при таком коэффициенте (2) мы получим ускоренное движение заднего фона, вместо замедленного.

Для наблюдателя создаётся впечатление, что задний фон существенно дальше от плоскости документа. Такой эффект не получится при использовании просто теней.

Написать комментарий

Мало букафф? Читайте есчо !

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать

Эффект тряски элемента на сайте при наведении с помощью CCS3

Октябрь 23, 2015 г.

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...

Читать

 

Комментарии к «Делаем эффект параллакса для заднего фона на сайте»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: