페이지 스크롤시 Fade In 효과주기

페이지 스크롤시 Fade In 효과주기

1. 단순 Fade In

스크롤되면 스르륵 하고 나타나는 형태의 가장 단순하고 기본적인 Fade In 방식입니다.

HTML

<div id="container">
    
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    
</div>

class명이 "hideme"인 <div>가 있습니다.

CSS

.hideme
{
    opacity:0;
}
 

.hideme 선택자로 불투명도를 0으로 만들어 화면에서 사라지게 합니다. 

jQuery

$(document).ready(function() {
    /* 1 */
    $(window).scroll( function(){
        /* 2 */
        $('.hideme').each( function(i){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            /* 3 */
            if( bottom_of_window > bottom_of_object/2 ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

1. 스크롤이벤트가 발생하면, 

2. 각 hideme 클래스 엘리먼트의 위치를 파악하고,

3. 엘리먼트의 모습이 50% 이상 보이면, 불투명도(opacity) 를 1로 서서히 바꿉니다. 

2. Slide In 

왼쪽에 살짝 숨어있다가 스크롤되면 본래 크기를 되찾는 형태의 Fade In 입니다.

1번과 원리는 같고, 초기에 왼쪽 마진이 -300px 인데 스크롤되면 0으로 원상복구 시킵니다.

css

.slideinleft {
    margin-left:-300px;
    max-width:100%;
}

jQuery

$(document).ready(function() {
    $(window).scroll( function(){
        $('.slideinleft').each( function(i){
            
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            if( bottom_of_window > bottom_of_element ){
                $(this).animate({'margin-left':'0px'},1000);
            }
            
        }); 
    });
});

3. Fade In with Silde In

최근에 만들어진 웹페이지들에서 자주 볼 수 있는 방식의, 가장 모던(?)한 형태의 Fade In 입니다.

스크롤하면 아래나 왼쪽에서 스르륵 하고 미끄러지듯 등장하며 Fade In 되는 형태입니다.

역시 1번/2번과 원리는 같고, 둘을 합쳐서 불투명도와 마진 모두를 animate 하면 됩니다.

예제는 2번을 재활용하느라 왼쪽인데, SPA나 블로그 등에서는 대부분 아래에서 등장하는 방식을 쓰는 경우가 많습니다.

css

.fadeinleft {
    opacity:0;
    margin-left:-300px;    
    max-width:100%;
}

jQuery

$(document).ready(function() {
    $(window).scroll( function(){
        $('.fadeinleft').each( function(i){
            
            var bottom_of_element = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            if( bottom_of_window > bottom_of_element ){
                $(this).animate({'opacity':'1','margin-left':'0px'},1000);
            }
            
        }); 
    });
});

주의:

하지만 스크롤이벤트마다 각 위치를 파악하고 계산하므로, 숨겼다 보여주려는 엘리먼트가 많을 때 컴퓨터가 느리면 속터질 수 있습니다.

요즘 프리 템플릿들을 보면 SPA스타일에서 초기화면을 제외한 모든 요소를 페이드인 하는 경우가 있는데 보기에는 물론 멋지지만 스크롤이 긴 SPA에서 보여줄 요소가 많으면 똥컴으로는 툭툭 끊기는 현상이 발생하므로 특정 엘리먼트(이미지 등) 부분만 적용하거나 페이지가 나뉜 곳에서 쓰는게 좋겠습니다. 

그리고:

솔직히 잘 구현되어 있는 라이브러리 많아요. 아래 링크 추천합니다... 

똥글 읽으시느라 고생 많으셨습니다. 

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