티스토리 콘텐츠가 서서히 등장하는 Fade-in 기능 추가하기

현재 제 티스토리에는 스크롤에 따라 이미지와 같은 콘텐츠들이 서서히 등장하는 Fade-in 기능이 적용되어 있습니다. 예전에 어떤 커뮤니티에서 Fade-in이라는 기능을 봤을 때 티스토리에 한번 꼭 적용을 해보고 싶었는데 우연히 구글링을 하다가 관련 코드를 발견해서 손쉽게 적용할 수 있었어요. 코드만 삽입하시면 누구나 쉽게 따라하실 수 있으니 천천히 따라해보시길!

스크롤에 반응하는 Fade-in

/*이미지 스크롤 효과*/
figure.imageblock,
#tt-body-page figure.imageblock,.image-container {   
opacity:0;
}

스크롤css.txt

0.00MB

1) 위의 코드를 복사한 후 티스토리-스킨편집-CSS영역에 붙여넣어주세요. Fade-in 기능이 적용되는 범위는 이미지와 이미지를 2~3장 붙여서 나열하는 imageblock 및 container입니다.

<!--스크롤 이미지 애니메이션-->
	<script>
$(document).ready(function() {
    /* 1 */
    $(window).scroll( function(){
        /* 2 */
        $('figure.imageblock,#tt-body-page figure.imageblock,.image-container').each( function(i){
            var bottom_of_element = $(this).offset().top + $(this).outerHeight() /5;
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            /* 3 */
            if( bottom_of_window > bottom_of_element ){
                $(this).animate({'opacity':'1'},700);
            }
        }); 
    });
});

	</script>

스크롤html.txt

0.00MB

2) 위의 코드를 복사하신 후 스킨편집-HTML영역에서 </body>코드 바로 위에 붙어넣어주시면 끝입니다.

화면 전환 Fade-in

사진만 Fade-in되는 것이 뭔가 아쉬워서 화면 전환시 콘텐츠 전체가 Fade-in될 수 있도록 설정해보았습니다. 이 코드는 꽁기님 블로그에서 발견했는데 사용해보니 생각보다 괜찮은 코드같더라구요.

#tt-body-page {
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

전체페이드.txt

0.00MB

이 코드를 복사하신 후 스킨편집-CSS에 붙여넣기 해주시면 됩니다. Fade-in 속도가 너무 느리면 사이트의 속도가 전체적으로 느린것 같은 느낌을 주기 때문에 그냥 기본 설정값(1초)이 제일 보기 좋은 것 같네요.

---

한가지 아쉬운 것은 스크롤에 반응하는 Fade-in 효과가 최상단에 있는 이미지를 정상적으로 불러오지 못한다는 것입니다. 스크롤을 해야만 반응하기 때문에 본문 최상단에 사진이 있을 경우 여백으로 표시되고 스크롤을 하면 이미지가 Fade-in되어 등장하니 참고하시길 바래요.