[JQuery] 스크롤 페이드 인 앤 아웃 효과2 - 스크립트 작성

2.직접 스크립트 로직을 짜서 구현

 

*스크롤 페이드 인앤아웃의 구현 방식

- fade란 클래스를 가진 요소에게 스크롤 페이드 인앤 아웃 효과를 부여 할 것.

- fade-left, fade-right, fade-up, fade-down, fade-zoom 등의 다양한 클래스를 활용하여 다양한 페이드 움직임을 부여.

- 스크롤이 해당 요소위치에 있다면 요소가 등장 하지만 스크롤이 해당 요소보다 위에 있다면 해당 요소는 사라짐.

 

 

1. html 작성방식

<!-- 단순 "fade-in" -->
<div class="fade"></div>

<!-- 왼쪽에서 오른쪽으로 fade-in -->
<div class="fade fade-left"></div>

<!-- 오른쪽에서 왼쪽으로 fade-in -->
<div class="fade fade-right"></div>

<!-- 위에서 아래로 fade-in -->
<div class="fade fade-down"></div>

<!-- 아래에서 위로 fade-in -->
<div class="fade fade-up"></div>

<!-- zoom되면서 fade-in -->
<div class="fade fade-zoom"></div>

 

2. SCSS 작성 방식

.fade {
    opacity: 0;
    transition: all 0.8s;
    
    &-left {transform: translateX(-50px);}
    &-right {transform: translateX(50px);}
    &-down {transform: translateY(-50px);}
    &-up {transform: translateY(50px);}
    &-zoom {transform: scale(0.5);}
    
    // fade in 실행 class
    &-active {
    	opacity: 1;
        transform: none;
    }
}

 

3. 스크립트(JQuery) 작성 방식

$(function(){
	function fadeIn() {
          let aniHeight = $(window).innerHeight() * 0.5;
          let ratio = Math.floor((1 / aniHeight) * 10000) / 10000;
          const fadeClass = "fade-active";

          $(".fade").each(function(){
            let contTop = $(this).offset().top;
            let windowBottom = $(window).scrollTop() + $(window).innerHeight();

            if(contTop < windowBottom) {
              if(contTop < windowBottom - aniHeight) {
                  $(this).addClass(fadeClass);
              } else {
                  $(this).removeClass(fadeClass);
              }
            } else {
                  $(this).removeClass(fadeClass);
            }
          });
   }
   
   $(window).on("scroll",function(){
   	fadeIn();
   });
});