ScrollReveal.js - 滚动时初始化/重置 div？答案

【问题标题】：ScrollReveal.js - init/reset divs when scroll?ScrollReveal.js - 滚动时初始化/重置 div？
【发布时间】：2018-04-30 08:33:05
【问题描述】：

请告诉我我做错了什么

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

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

怎么办？

来源：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>

【问题讨论】：

明确一点，您希望您的动画与此处的 scrollReveal 主页演示中的一样吗？ scrollrevealjs.org
是的，当我向下滚动或向上滚动时，动画被重置
youtu.be/lwMaarR7ySc

标签： javascript scrollreveal.js

【解决方案1】：

如果我以您为例，您可以将reset 选项中的reset 属性设置为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>

【讨论】：