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

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

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

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

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

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

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

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Zoom-эффект на CSS3

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

Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, ...

Читать

 

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

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



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