scroll check

by dohoons

HTML

스크롤▼▼▼▼

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="wrap scroll-check" data-ratio="50">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="wrap scroll-check">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

SCSS

.wrap {
  display: flex;

  .box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    margin: 5px;
    color: #fff;
    background: purple;
    position: relative;
  }
    
  &.ready {
    .box {
      opacity: 0;
      top: 50px;
      transition: all .4s;
    }

    &.in {
      .box {
        opacity: 1;
        top: 0;
        transition: all .8s;
        
        &:nth-of-type(2) { transition-delay: .2s; }
        &:nth-of-type(3) { transition-delay: .4s; }
      }
    }
  }
}

JavaScript

// scroll check
(function() {
  var $window = $(window);
  var $target = $('.scroll-check');

  function scrollHandle() {
    var winHeight = $window.height();
    var scrollTop = $window.scrollTop();

    $target.each(function() {
      var $this = $(this);
      var ratio = 1 - (Number($this.data('ratio')) || 80) / 100;
      var isViewportIn = scrollTop > ($this.offset().top - winHeight) + (winHeight * ratio);
      $this.toggleClass('in', isViewportIn);
    });
  }

  $target.addClass('ready');
  $window.on('resize scroll', scrollHandle);
  scrollHandle();
})();