Как правильно использовать setPin ScrollMagi c для нескольких div с одинаковыми классами? - PullRequest
Новая
       6

Как правильно использовать setPin ScrollMagi c для нескольких div с одинаковыми классами?

0 голосов
/ 02 февраля 2020

Я пытаюсь создать простой блок с изображением. Все работает нормально, но если я добавлю еще один блок, второй блок не будет работать.

Я понимаю, что должен использовать each(), но не могу передать значение из каждого метода в setPin(). Как я могу пройти внутри setPin () $(this).find(".image-inner")? 

var controller = new ScrollMagic.Controller();

$(".container").each(function() {
  var self = $(this),
    image = self.find(".image"),
    imageInner = self.find(".image-inner"),
    content = self.find(".content");

  const pinScene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0,
    duration: getDuration
  }).addTo(controller);

  if (window.matchMedia("(min-width: 768px)").matches) {
    pinScene.setPin(".image-inner", {
      pushFollowers: false
    });
  }

  $(window).resize(function() {
    if (window.matchMedia("(min-width: 768px)").matches) {
      pinScene.setPin(".image-inner", {
        pushFollowers: false
      });
    } else {
      pinScene.removePin(".image-inner", true);
    }
  });

  function getDuration() {
    return content.outerHeight(true) - imageInner.outerHeight(true);
  }
})
.container {
  display: flex;
  flex-wrap: nowrap;
  max-width: 960px;
  margin: 0 auto;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .container {
    display: block;
  }
}

.content {
  width: 40%;
}

.image {
  height: 200px;
  width: 40%;
}

.image-inner {
  width: 100% !important;
  height: 100%;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<div class="container">
  <div class="content">
    Some dummy text
  </div>
  <div class="image">
    <div class="image-inner">
    </div>
  </div>
</div>

Вы можете увидеть это здесь в codepen

Можете ли вы помочь мне, пожалуйста?

...