Движение фона при скроллинге

Движение фона при скроллинге

При скроллинге страницы её фон будет перемещаться относительно контента, для работы эффекта требуется подключенная библиотека jQuery.

Использование эффекта движущегося фона

CSS движущегося фона

На страницах с используемым эффектом добавьте стили для родительского элемента <body>.

<style>
body{background:url(//atmpl.ru/design/scroll-effect/2015/movement-bg/movement-background.gif) fixed center 0px;}
</style>

Скрипт движущегося фона

Перед закрывающим тегом </body> добавьте скрипт управления эффектом.

<script>
$(window).scroll(function () {
var movement = -parseInt($(this).scrollTop() / 10);
$('body').css({
backgroundPosition: 'center ' + movement + 'px'
});
});
</script>

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


Рейтинг: 5.0/5 из 5



Добавлено Автор Ник Источник Просмотров Комментариев Теги
23-01-2015 Михаил Меренков aTmpl © 2285 0 движение фона, при скроллинге, премещение фона