Question

请告诉我我做错了什么

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

但如果我从下往上滚动，那么我看到很好的动画，但它没有重置库而另一个滚动没有任何变化

该怎么办？

<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, }); });

这里的例子如下：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

function vakantieVeilingHuidigeTijd($url){
  $url = file_get_html($url);
  $huidigeTijdMinuut = $url->find('span[class=time-value js-minutes]');
  echo "Minuten te gaan : " . $huidigeTijdMinuut . "<br>";
  var_dump($huidigeTijdMinuut);
  print_r($huidigeTijdMinuut);
  return $huidigeTijdMinuut;
}

＆＃13;

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

1 个答案: