Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.
Этот кусочек скрипта привязывает нас к событию onscroll окна. Мы каждый раз считываем текущую позицию и вычисляем смещение фона.
|
|
jQuery( window ).scroll(function() { var pos = jQuery( window ).scrollTop() / 2; jQuery('body').css({backgroundPosition: 'left -' + pos + 'px'}); }); |
Надо только не забыть, что положение фона у нас фиксировано. Иначе, при таком коэффициенте (2) мы получим ускоренное движение заднего фона, вместо замедленного.
|
|
body { background: url(some-background.jpg) fixed; } |
Для наблюдателя создаётся впечатление, что задний фон существенно дальше от плоскости документа. Такой эффект не получится при использовании просто теней.
спец. эффекты
Данная запись опубликована в 19.10.2015 16:08 и размещена в рубрике jQuery, Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Ноябрь 1, 2015 г.
Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...
Читать
Октябрь 23, 2015 г.
В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). ...
Читать
Октябрь 21, 2015 г.
Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, ...
Читать
Апрель 29, 2017 г.
Ripple эффект - это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги ...
Читать