滚动揭示.js - 滚动时初始化/重置 div?

Question

请告诉我我做错了什么

当我从上到下滚动时，我只看到一次动画

但是如果我从下到上滚动，那么我会看到漂亮的动画，但它不会重置库，另一个滚动没有任何变化

怎么办？

来源： https://codepen.io/anon/pen/OZWEgL

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.1.4/scrollreveal.min.js"></script>
<div class='wrapper'>
  <div class='box dos'></div>
  <div class='box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno'></div>
  <div class='box dos'></div>
  <div class='box two dos'>
    hello
  </div>
  <div class='box dos'></div>
  <div class='box uno'></div>
</div>
<style>
    .wrapper{display:flex;flex-wrap:wrap;}
    .dos{flex-grow:2;}
    .uno{flex-grow:1;}
    .box{height:320px;flex-basis: 20rem;background-color:#242424;border:5px solid white;}
    .box.two{color:white; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
    window.sr = ScrollReveal({ reset:false });
    sr.reveal('.dos',{ origin: 'bottom', distance: '10rem', duration: 900, });
    sr.reveal('.uno',{ origin: 'bottom', distance: '0rem', duration: 1200, });
    sr.reveal('.two',{ duration: 750, origin:'right', distance: '0rem', viewOffset  : {bottom: 189}, delay:570, });
});
</script>

Answer 1

如果我以你为例，你可以让重置效果设置reset道具ScrollReveal选项中true：ScrollReveal({reset: true})

下面是示例：

document.addEventListener("DOMContentLoaded", function(event) {
  window.sr = ScrollReveal({reset: true});
  sr.reveal('.dos', {
    origin: 'bottom',
    distance: '10rem',
    duration: 900,
  });
  sr.reveal('.uno', {
    origin: 'bottom',
    distance: '0rem',
    duration: 1200,
  });
  sr.reveal('.two', {
    duration: 750,
    origin: 'right',
    distance: '0rem',
    viewOffset: {
      bottom: 189
    },
    delay: 570,
  });
});

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.dos {
  flex-grow: 2;
}
.uno {
  flex-grow: 1;
}
.box {
  height: 320px;
  flex-basis: 20rem;
  background-color: #242424;
  border: 5px solid white;
}
.box.two {
  color: white;
}

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.1.4/scrollreveal.min.js"></script>
<div class='wrapper'>
  <div class='box dos'></div>
  <div class='box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno box uno'></div>
  <div class='box uno'></div>
  <div class='box uno'></div>
  <div class='box dos'></div>
  <div class='box two dos'>
    hello
  </div>
  <div class='box dos'></div>
  <div class='box uno'></div>
</div>