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

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

CSS

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

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

JS

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

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.