Кoнфликт parallax

220

17 января 2018, 15:14

Делаю макет с materialize встроенный parallax не нравится, решил кастомный делать (рабочий вариант, не раз внедрял) https://jsfiddle.net/e19wbnhs/

Не могу понять, внедряю сюда, появляется полоса(дублируется фон), пропадает, если убрать fixed, но так не работает сам parallax

function Parallax() {
        var scrolled = $(window).scrollTop() + 1;
        $('.stat-slid-prlx').css('background-position', '15' + -(scrolled * 0.3) + 'px');
    }

    $(window).scroll(function (e) {
        Parallax();
    });

http://wshellx.myjino.ru/energy/ блок

<div class="stat-slid-prlx " style="background: url(http://www.cok-rf.ru/img/first_level/4_p.jpg) fixed;" ></div>

Answer 1

изображение по размеру не подходит под фон и на большинстве экранов будет заполнять собой фон повторяясь. Лечить так:

.stat-slid-prlx{
    background-image: url(http://www.cok-rf.ru/img/first_level/4_p.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: top;
}

Единственное - вам надо кастомизировать плагин так, что бы он ложил фон на блок не так - background: url(http://www.cok-rf.ru/img/first_level/4_p.jpg) fixed, а так - background-image: url(http://www.cok-rf.ru/img/first_level/4_p.jpg);

З.Ы. я так и не понял, при чём там параллакс. Там просто background-attachment: fixed;