JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<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>
  <div class="a item">
    <div class="ani1"></div>
    <div class="ani2"></div>
    <div class="ani3"></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>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="c item">cccccccccccccccccc
    <div class="ani1"></div>
    <div class="ani2"></div>
    <div class="ani3"></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>
  <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>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="b item">bbbbbbbbbbbbbbbbb
    <div class="ani1"></div>
    <div class="ani2"></div>
    <div class="ani3"></div>b</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>
  <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>
  <br>
  <br>
  <br>
  <br>
  <br>
 ...

SCSS

.active {
  border: 1px solid;
  .ani1,
  .ani2,
  .ani3 {
    margin: 0;
    opacity: 1;
  }
  
  &.a {
    .ani1,
    .ani2,
    .ani3 {
      transform: scale(1.2);
    } 
  }
  
  &.b {
    .ani1,
    .ani2,
    .ani3 {
      transform: rotate(0);
    }
  }
}

.ani1,
.ani2,
.ani3 {
  opacity: 0;
  width: 130px;
  height: 130px;
  margin: 20px;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: ease;
  background: #000;
}

.ani1 {
  margin-left: -100px;
}

.ani2 {
  transform: rotate(45deg);
  margin-top: -100px;
  transition-delay: .3s;
}

.ani3 {
  margin-left: 100px;
  transition-delay: .6s;
}

JavaScript

function fnScrollEvt() {
  this.documentHeight = $(document).height(); // 도큐먼트 높이
  this.windnowHeight = $(window).height(); //브라우저 높이 
  this.poX = $(window).scrollTop();
  this.idx = (this.idx === undefined) ? 0 : this.idx;
  this.item = $('.item');
  //console.log(scrollEvt.idx);
  // console.log(scrollEvt.item.eq(scrollEvt.idx));
  var condition = (this.item.eq(this.idx).length === 0) ? false : this.item.eq(this.idx).offset().top;
  var scrollCenter = this.poX + this.windnowHeight / 2;
  // console.log(item.eq(i + 1));
  //  console.log(condition);

  if (condition !== false && condition <= scrollCenter) {
    this.item.eq(this.idx).addClass('active');
    this.idx = this.idx + 1;
    //console.log('bbbbbbbbbbbbbbbb');
    //return this.idx;
  } else {
    if (this.item.hasClass('active')) {
      this.item.eq(this.idx).removeClass('active');
      this.idx = (this.idx - 1 < 0) ? 0 : this.idx - 1;
      //    console.log('aaaaaaaaaaaaaa');
      //return this.idx;
    }
  }
}

$(window).scroll(function() {
  fnScrollEvt();
})