Блог

Главная - Вопросы по программированию - Фон параллакса CSS

Фон параллакса CSS

#jquery #html #css #parallax

#jquery #HTML #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, поэтому он работает и на мобильных телефонах.

Комментарии:

1. Я не думаю, что это работает и для текстуры. Это просто «выглядит» так, как есть, но изображение текстуры на самом деле не движется. Фактически он ведет себя так же, как изображение вашего героя — изображение исправлено , но веб-сайт прокручивается

2. Попробуйте изменить / добавить это в свои разделы background-attachment: fixed; , не scroll

3. @NikhilNanjappa смотрите мои обновления

Ответ №1:

Я исправил это, изменив свой 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, которое устранило проблему.

Я также удалил запрет на повтор из CSS.