Запуск нескольких элементов с помощью ScrollMagic с одной сценой - PullRequest
Новая
       83

Запуск нескольких элементов с помощью ScrollMagic с одной сценой

0 голосов
/ 31 октября 2019

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

const controller = new ScrollMagic.Controller();

var scenefadein = new ScrollMagic.Scene({
	triggerElement: ".fade-in",
	triggerHook: 1,
	offset: 0,
  reverse: true
})
.setClassToggle(".fade-in", "visible")
.addTo(controller);
.spacing {
  padding-top:100px;
  padding-bottom:100px;
  border-bottom:1px solid #ececec;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>

<div class="spacing"></div>

<div class="spacing">  
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

<div class="spacing">  
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

1 Ответ

0 голосов
/ 31 октября 2019

Я нашел решение, используя TweenMax и jQuery. 

var controller = new ScrollMagic.Controller();

// loop through all elements
$('.fade-in').each(function() {
  
  // build a tween
  var tween = TweenMax.from($(this), 0.7, {autoAlpha: 0, y: '+=200', x: '0', ease:Linear.easeNone});

  // build a scene
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
	triggerHook: 0.7,
	offset: 0,
  reverse: true
  })
  .setTween(tween)
  .addTo(controller);
  
});
.spacing {
  padding-top:100px;
  padding-bottom:100px;
  border-bottom:1px solid #ececec;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>



<div class="spacing"></div>

<div class="spacing">
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>

<div class="spacing">
  <div class="fade-in">
    <img src="https://picsum.photos/200/300">
  </div>
</div>

<div class="spacing"></div>
...