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

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

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

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

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

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

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

Эффект размытия blur средствами CSS

Декабрь 23, 2015 г.

В интернете много решений, я попробовал, наверное, все :) Основная проблема - не удаётся достичь кросс-браузерности. Как всегда, отличился IE. Для ...

Читать

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его - "игра ...

Читать

 

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

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



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