[s24344]

Здравствуйте. Подскажите пожалуйста как решить следующую задачу.
Реализован следующий функционал parallax. Сейчас он воздействует на элементы сразуже при скролле. Как мне реализовать следующее, начинать воздействие на элементы только при появлении их во viewport. А затем в обратном направлении.
CodePen
https://codepen.io/s24344/pen/WgmVbP

<section class="anime__section">
    <div class="anime__large">
        <div class="anime__small"></div>
    </div>
</section>

<section class="anime__section">
    <div class="anime__large">
        <div class="anime__small"></div>
    </div>
</section>

var parallax = (function() {

  var bg = document.querySelectorAll('.anime__small');

  return {
    move: function(block, windowScroll, strafeAmount) {
      var strafe = windowScroll / -strafeAmount + '%';
      var transformString = 'translate3d(0,' + strafe + ', 0)';

      var elements = [...block];

      elements.forEach(item => {
        item.style.transform = transformString;
        item.style.webkitTransform = transformString;
      });
      
      style.transform = transformString;
      style.webkitTransform = transformString;
    },

    init: function(wScroll) {
      this.move(bg, wScroll, 20);
    }
  };
})();

window.onscroll = function() {
  var wScroll = window.pageYOffset;
  parallax.init(wScroll);
};