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

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

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

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

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

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

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

Создаём ripple эффект

Апрель 29, 2017 г.

Ripple эффект - это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги ...

Читать

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

Апрель 19, 2016 г.

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

Читать

 

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

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



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