티스토리 콘텐츠 페이드인 효과 적용 방법 | CSS, Javascript

페이드인 효과

지금 저의 티스토리 블로그에는 Fade-in 효과가 적용되어 있습니다. 게시글을 표현할 때 가장 예쁘게 표현할 수 있는 방법이 아닐까 생각합니다. 저와 같은 생각을 가지고 계신 분들에게 이글이 도움이 되었으면 합니다.

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

위에 있는 CSS 코드를 복사하여 스킨편집 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 편집영역에서 </body> 코드 바로 위에 붙여 넣어주시면 완료입니다.

페이드인 추가 팁

무언가 이미지만 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;
    }
}

주의사항

위 모든 코드는 티스토리 반응형 스킨에 적용되는 코드입니다. 그리고 콘텐츠를 담당하는 div 클래스를 찾아 수정한 다음, CSS 적당한 위치에 붙여 넣으시면 됩니다. 참고로 #tt-body-page 부분은 지금 제가 사용하고 있는 스킨 전체뷰를 담당하고 있는 id값입니다. 수정방법은 어렵지 않으니 천천히 해보시면 멋진 스타일을 만드실 수 있을 겁니다.