ScrollReveal.js - инициализация / сброс дивов при прокрутке? - PullRequest
Новая
       11

ScrollReveal.js - инициализация / сброс дивов при прокрутке?

0 голосов
/ 29 апреля 2018

Пожалуйста, скажите мне, что я делаю не так

когда я прокручиваю сверху вниз, то вижу анимацию только один раз

но если я прокручиваю снизу вверх, то вижу хорошую анимацию, но она не сбрасывает библиотеку, а другая прокрутка ничего не меняет

что делать?

источник: 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>

1 Ответ

0 голосов
/ 30 апреля 2018

Если я возьму ваш пример, вы можете установить для настроек эффекта сброса значения 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>
...