Simple parallax на query


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

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

В этом срипте все достаточно просто, он перебирает каждый объект с фоном и просто анализируя положение прокрутки меняет свойство положения фона, то есть 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');
    });

})

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

Скачать файл: simple-parallax.rar [1,48 Mb] (cкачиваний: 19)

Demo
Автор: Kylaksizov

Комментарии ( 1 )

  1. +1

    Гость Master

    Спасибо!
    7 февраля 2017 08:43 Ответить


Отправить

В корзине: 0 шт.

на сумму: 0

Всего: 0

Оформить заказ Очистить корзину