CSS Параллакс

В настоящее время я разрабатываю https://dev.shivampaw.com/me, и у меня есть класс под названием «parallax-bg», который должен создавать фон параллакса.

Для моего контакта (раздела) справа внизу он еще не работает для моего героя (сверху) и текстуры (средний), он отлично работает.

Это jQuery, который я использую:

$(window).scroll(function() {
  var scrolledY = $(window).scrollTop();
  $('.parallax-bg').css('background-position', 'center ' + ((scrolledY) - 70) + 'px');
});

И CSS для секции контактной формы:

section#contact{
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/bg-contact.jpg) no-repeat center -70px;
    background-size: cover;
    background-attachment: scroll;
    color: white;
}

И для раздела героя:

section#hero{
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/top-bg.jpg) no-repeat center -70px;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
    color: white;
    font-weight: bold;
    padding-bottom: 50px;
}

Кто-нибудь знает, почему это происходит?

благодаря

Обновление: по параллаксу я подразумеваю фиксированный фон. Я использую jquery, так что он работает и на мобильных телефонах.

jquery,html,css,parallax,

0

Ответов: 1

0

Я исправил это, изменив свой jQuery на следующее:

$(window).on('scroll resize load',function(){
    // 500px
    var scrolledY = $(window).scrollTop();
    $('.parallax-bg').each(function(){
        $obj = $(this);
        var pixelsY = $obj.data("position");
        $obj.css('background-position', 'center ' + ((scrolledY) + pixelsY) + 'px');
    });
});

И добавьте атрибут данных, который называется position в моем html, где класс parallax-bg. Это представляло мое желаемое положение фона y offset, которое фиксировало проблему.

Я также удалил no-repeat из CSS.

JQuery, HTML, CSS, параллакс,
Похожие вопросы
Яндекс.Метрика