Simple parallax на query

Описание

Есть довольно много плагинов, которые реализуют красивые parallax-эффекты. Но многие из них, можно сказать все, требуют больше места.
Уверен, не всякий хочет грузить на сайт большой плагин, который всего лишь анимирует фон. При этом почти все плагины не работают в мобильных из-за использования transform 3d свойств.

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

В этом срипте все достаточно просто, он перебирает каждый объект с фоном и просто анализируя положение прокрутки меняет свойство положения фона, то есть background-position.

Подключение очень простое - каждый объект содержащий фон, должен иметь класс parralax и атрибут data-speed.

Подключение simple parallax

Во первых подключаем сам ajax или jquery и стили:

<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>

Html код:

<div id="bg" class="parallax" data-speed="3"></div>

Стили для блока:

#bg{
    background: url("bg1.jpg") no-repeat center center;
    background-size: cover;
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: #fff;
}

Ну и наш самый важный код скрипта:

$(function(){
    
    function parallax(id){
        $(id).each(function (index, el) {
            if($(el).hasClass("down")) var direction = "";
            else var direction = "-";
            var yPos = direction+($(window).scrollTop() / $(el).attr('data-speed'));
            var coords = 'center ' + yPos + 'px';
            $(el).css({backgroundPosition: coords});
        });
    }
    parallax('.parallax'); // вызываем изначально
    // вызываем при прокрутке
    $(window).scroll(function () {
        parallax('.parallax');
    });
})

В архиве все понятно подключено как в демо.



Demo