#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.