제이쿼리 스크롤시 애니메이션 추가

 

라이브러리를 계속 쓰는건 권장하지않음

숙지하여 응용할 수 있게 먼저 예제를 만들어보자

 

 

 

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

 

기존 AOS 를 뜯어보면 

 

공통클래스 사용하였다 이유는?

스크롤로 각각 위치판단후 제이쿼리를 개별 적용하게되면 변수가 너무 많기때문

 

 

---

초기화 코드 공통클래스를 사용하여 적용해보자

 

/* 애니메이션 공통 */
.animate_fade_down { transform: translate(0, -100px); opacity: 0; transition: all 1s; }
.animate_fade_up { transform: translate(0, 100px); opacity: 0; transition: all 1s; }
.animate_fade_flip { transform: rotateY(90deg); transition: all 1s; opacity: 0; }
[class*=animate_fade].on { opacity: 1; transform: translate(0, 0) rotate(0); }

공통 클래스명대로 효과를 다르게 주고 

애니메이션 on 이걸린 공통클래스 애들을 투명도 위치를 원상복귀 해라.

 

공통클래스 풀이
.animate_fade_down { transform: translate(0, -100px); opacity: 0; transition: all 1s; }	위에서 아래로 내려옴
.animate_fade_up { transform: translate(0, 100px); opacity: 0; transition: all 1s; }	아래에서 위로 올라옴
.animate_fade_flip { transform: rotateY(90deg); transition: all 1s; opacity: 0; }	가운데서 펼쳐지는 플립
[class*=animate_fade].on { opacity: 1; transform: translate(0, 0) rotate(0); }	애니메이션 on 이걸린 공통클래스를 투명도, 위치를 원상복구
*= 포함하는 'animate_fade' 문자를

 

 

---

 

 

예제 html 해당요소에 공통 클래스로 클래스명 추가

 

 

그럼 transition  가 걸려 투명하게 안보이게 된다.

 

---

테스트 

 

 

  // animate_fade 문자열을 포함하고 있는 모든요소 선택

  $('[class*= animate_fade]')

 

---

 

each 추가

each 로 각각 요소를 선택해라  

 $('[class*= animate_fade]').each;

 

 

  // 제이쿼리 each 반복문 - 제이쿼리 객체에 반복적하여 이벤트 등을 순차적으로 걸때
  $('[class*= animate_fade]').each(function (i, v) {
    console.log(i, v);
  });
});

그럼 각각 선택됨을 알수 있다

 

(i는 생략 불가 그냥 인덱스로 들어오게된다. )

---

 

 

this 윈도우 요소 전체

    // each 에서 $(this) 는 요소들이다

  $('[class*= animate_fade]').each(function (i, v) {
    console.log($(this));
    // each 에서 $(this) 는 요소들이다

    $(window).on('scroll', function () {
      console.log(v);
    });
  });

 

 

 

그럼 요소들이 다 선택되어 들어온다. 

 

---

  $('[class*= animate_fade]').each(function (i, v) {
    console.log($(this));
    // each 에서 $(this) 는 요소들이다

    $(window).on('scroll', function () {
      console.log(v.offset().top);
    });
  });

 

선택안됨 v 는 제이쿼리 객체가 아니기 때문에 offet 메서드를 사용할 수 없다. 

그러므로 this 를 사용하여 선택되게 해보자

 

    $(window).on('scroll', function () {
      // 이벤트 핸들러에서 $(this)는 이벤트 바인딩 한 window
      console.log($(this));
    });

마찬가지로 나오지 않음 this는 window 이기 때문에 윈도우로 나옴

 

 

그럼 변수로 사용해보자

this는 요소이기때문에 변수에 담아서 사용하자

 

 

요소들이 나오는것 확인 그럼 옵셋 사용가능

    var _this = $(this);

    $(window).on('scroll', function () {
      // 이벤트 핸들러에서 $(this)는 이벤트 바인딩 한 window
      console.log($(_this.offset().top));
    });

 

 

 

offset 과 top 설정시 스크롤 바도 나오는것 확인

 

 

---

그럼 if 문을 사용해 창높이만큼 계산하여 

원하는 스크롤 위치에서 애니메이션 이벤트가 나오도록해보자

 

st >= posY 일때 윈도우에서 스크롤 포함 길이를 뺐을때 요소 위치 확인

 

 $(this).outerHeight()) 창높이

  $('[class*= animate_fade]').each(function (i, v) {
    // each 에서 $(this) 는 요소들이다
    // this 바인딩
    var _this = $(this);

    $(window)
      .on('scroll', function () {
        // 이벤트 핸들러에서 $(this)는 이벤트 바인딩 한 window
        var posY = _this.offset().top;
        var st = $(this).scrollTop();

        if (st >= posY - $(this).outerHeight()) {
          _this.addClass('on');
        } else {
          _this.removeClass('on');
        }
      })
      .trigger('scroll');
  });

그럼 요소1 은 위에서 아래로 나오고

요소 2는 아래에서 위로 나오는것확인

 

 

---

 

디테일 

창이 시작하자마자 애니메이션이 걸리므로 

위치를 조정해준다. 

 

 

if (st >= posY - $(this).outerHeight() + 200) {

 

위치에 창길이를 더해준다

 

스크롤이 창길이보다 같거나 클때 +200 길이를 추가하여 원래 위치보다 더 빨리 보여주기

---

 

 

이렇게 제이쿼리 공통으로 이벤트를 주게되면

창길이가 늘어나도 동일하게 먹힌다.