Loading...

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качиваний: 9)

Demo


Автор: Kylaksizov
Поделиться:

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


  1. avatar_/templates/Kylaksizov/dleimages/noavatar.png
    Гость Master 7 февраля 2017 08:43
    • +1
    Ответить
    Спасибо!
    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

В корзине: 0 шт. 0 руб.
Моя группа в телеграме
Отключите расширение AdBlock на нашем сайте!

Собеседники

Переписка

Нименование Количество Цена / 1 шт.
Всего: 0 руб.