Параллакс фоновой картинки элемента

readme.md

jQuery плагин для создания эффекта параллакса путем изменениия свойства background-position-y у элемента

Использование

$('.selector_with_background_image').parallaxBackground();

Параметры

speed: Изменяет скорость параллакса (по умолчанию - 1), если поставить отрицательное значение, то изменится направление параллакса
min: минимальное значение background-position-y в процентах (по умолчанию - 0)
max: максимальное значение background-position-y в процентах (по умолчанию - 100)

$('.selector_with_background_image').parallaxBackground({speed: 0.5, min: 50, max: 100});

jquery.parallaxBackground.js

(function ($) {
    jQuery.fn.parallaxBackground = function (options) {
        options = $.extend({
            min: 0,
            max: 100,
            speed: 1
        }, options);

        var previousScroll = 0;
        var directionScroll;

        var parallax = function () {
            var elemTopPosition = $(this).offset().top;
            var elemHeight = $(this).height();
            var currentBackPosition = parseFloat($(this).css('background-position-y'));
            if (window.pageYOffset + window.innerHeight > elemTopPosition && window.pageYOffset < elemTopPosition + elemHeight) {
                var newBackPosition = (currentBackPosition + options.speed * directionScroll);
                if (newBackPosition < options.min || newBackPosition > options.max)
                    return;
                $(this).css('background-position-y', newBackPosition + '%');
            }
        };

        $(window).on('scroll', { elements: this }, function (event) {
            directionScroll = (window.pageYOffset > previousScroll) ? 1 : -1;
            previousScroll = window.pageYOffset;
            $(event.data.elements).each(parallax);
        });
        return this.each(parallax);
    }
}
)(jQuery);