Простой Parallax эффект на jQuery

Добавить в закладки

Если вы давно хотели придать некоторым элементам на сайте Parallax эффект - данное решение вам идеально подойдёт

Для начала посмотрите ДЕМО

Моё тестирование в редакторе: КЛИК

Установка:

1#: В самый низ вашего CSS вставьте:

.apoparallax {
width: 900px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
}

.apoparallax {

width: 900px;

position: absolute;

top: 0px;

left: 50%;

margin-left: -450px;

}

2#: В качестве примера будем использовать картинку. Вставим следующий код после ‹/head›:

 <img src="http://imapo.ru/img/ray.png" class="apoparallax">

1	<img src="http://imapo.ru/img/ray.png" class="apoparallax">

3#: Исполняемый скрипт. Вставьте после ‹/head›:

<script>
$(function() {
$(window).bind('scroll', function(e) {
var scrolled = $(window).scrollTop();
$('.apoparallax').css('top', (0 + (scrolled * .35)) + 'px'); // Для элемента с классом apoparallax на каждый такт прокрутки добавляем или отнимаем отступ сверху
});
});
</script>

$(function() {

$(window).bind('scroll', function(e) {

var scrolled = $(window).scrollTop();

$('.apoparallax').css('top', (0 + (scrolled * .35)) + 'px'); // Для элемента с классом apoparallax на каждый такт прокрутки добавляем или отнимаем отступ сверху

});

</script>

P.S. Возникли вопросы - задавайте их в комментариях