Параллакс: смещение фона, чтобы показать повтор - PullRequest
Новая
       24

Параллакс: смещение фона, чтобы показать повтор

0 голосов
/ 24 ноября 2018

У меня есть сайт, встроенный в Bootstrap 4, который в настоящее время использует простой параллакс js / css для создания разделов на домашней странице.Кажется, что он отлично работает во всех разделах, кроме последнего, где фон существенно отключен, так что вы можете видеть повторение фона.CSS одинаков для каждого, как и размер фонового изображения.Я не смог найти решение. Черновой сайт 

<style>
.parallax {
  height:350px;
}
.paralax-static{
  height:350px;
}
        section.module.parallax-1 {
  background-image: url("assets/img/parallax/parallax_1.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
  }        section.module.parallax-2 {
  background-image: url("assets/img/parallax/parallax_2.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
  }        section.module.parallax-3 {
  background-image: url("assets/img/parallax/parallax_3.jpg");
  background-position: 50% 0;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  /* background-color: rgba(0,123,255,0.4); */
  background-blend-mode: screen;
  }
  .parallax-container h2 span {
      font-size:100px!important;
      /* color:#f7971e; */
      color:#ffffff;
      position: absolute;
      margin-top:100px;
      text-shadow:1px 1px 10px #000, 1px 1px 10px #000;
  }
  </style>

HTML: 

    <section class="module parallax parallax-1 d-none d-md-block d-lg-block d-xl-block" data-type="background" data-speed="10">
        <div class="parallax-container">
            <h2 class="mx-auto d-flex justify-content-center"><span>Fitness</span></h2></span>
        </div>
    </section>
    <section style="max-height:350px;overflow:hidden;" class="d-sm-block d-md-none"> 
        <img src="assets/img/parallax/parallax_1.jpg" class="img-fluid" />
    </section>

JS в конце документа с использованием jquery 3: 

$(document).ready(function(){
  var $window = $(window);
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });
...