Как применить Parallax Scroll в div, видимом на экране - PullRequest
Новая
       38

Как применить Parallax Scroll в div, видимом на экране

1 голос
/ 30 января 2020

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

Пока это мой код.

HTML

  <div class="workImg">
    <img class="inWorkImg" src="img/08.png"/>
  </div>

  <div class="workImg">
    <img class="inWorkImg" src="img/09.png"/>
  </div>

  <div class="workImg">
    <img class="inWorkImg" src="img/10.png"/>
  </div>

  <div class="workImg">
    <img class="inWorkImg" src="img/11.png"/>
  </div>

CSS

.workImg{
 position: absolute;
  width: 80%;
  height: 230px;
  bottom: 15px;
  overflow: hidden;
}

.inWorkImg {
  object-fit: cover;
  height: 110%;
}

JQUERY

var parallaxElements = $('.inWorkImg'),
  parallaxQuantity = parallaxElements.length;
var visible = isInViewport(this)


$(window).on('scroll', function () {

  if(visible) {

    window.requestAnimationFrame(function () {

      for (var i = 0; i < parallaxQuantity; i++) {
        var currentElement = parallaxElements.eq(i);
        var scrolled = $(window).scrollTop();

        currentElement.css({
          'transform': 'translate3d(0,' + scrolled * -0.06 + 'px, 0)'
        });

      }

    });
  }

});

1 Ответ

2 голосов
/ 30 января 2020

На самом деле вам не нужно использовать jQuery для этого, но используйте чистый css вот так -

Вместо тега img эти div получат свойство background-image. 

 <div class="workImg1"></div>
 <div class="workImg2"></div>
 <div class="workImg3"></div>
 <div class="workImg4"></div>

И CSS будет выглядеть так - 

.workImg1, .workImg2, .workImg3, .workImg4 {
      /* Set a specific height */
      min-height: 500px; 

      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.workImg1 {
          /* The image used */
          background-image: url("IMG_URL");
}
.workImg2 {
          /* The image used */
          background-image: url("IMG_URL");
}
.workImg3 {
          /* The image used */
          background-image: url("IMG_URL");
}
.workImg4 {
          /* The image used */
          background-image: url("IMG_URL");
}
...