(티스토리) 페이지 스크롤시 이미지 Fade In 효과주기

본문을 스크롤하면 이미지가 바로바로 나오게 되는데 문득 생각이 든 게 스크롤 위치에 따라 이미지가 스르륵 하고 나타나게 하고 싶다는 생각이 들었습니다. 그래서 이번에는 페이지 스크롤시 이미지 Fade In 하는 방법에 대해 알아보겠습니다.

 

일단 이 기능을 사용하려면 Javascript를 작성해줘야 합니다.

 

Fade In 효과

페이지가 스크롤 되면 이미지가 스르륵 하고 나오는 효과를 사용하려면 아래와 같이 작성하면 됩니다.

CSS

.image { opacity:0; }

이미지의 opacity(투명도) 를 0으로 설정해줘야 합니다.

Javascript

	<!--스크롤 이미지 애니메이션-->
<script>
$(document).ready(function() {
    $(window).scroll( function(){
			
        $('image').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'},700);
            }
            
        }); 
    });
});

자바스크립트의 opacity뒤에 1000 부분을 조절하여 이미지가 나타나는데까지의 속도를 설정할 수 있습니다.

 

위 기능은 이미지가 화면의 아래에 닿았을때 표시되도록 해주는데, 만약 이미지가 너무 크면 본문에 여백이 있는 것처럼 느껴질 수 있습니다. 그럴 때는 이미지가 중간 정도 왔을 때 표시되게 해 줄 수 있습니다.

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

var bottom_of_element = $(this).offset().top + $(this).outerHeight() / 3의 '/3' 부분을 직접 설정하여 이미지가 표시되는 위치를 지정할 수 있습니다.  (저는 뭔가 /5 가 적당한거같아요 🤔)

블로그에 적용

이제 이것을 티스토리에 적용시켜보려고 하는데 블로그 스킨마다 지정된 이미지가 있을 수 있기때문에 아래 코드는 직접 찾아서 넣는 것을 추천드립니다. 만약 img를 위 코드에 넣게 되면 블로그에 있는 모든 이미지가 적용되어 보기 좋지 않습니다. 저는 본문에 있는 이미지만 효과를 주고 싶기 때문에 아래와 같이 코드를 넣었습니다.

CSS

figure.imageblock,
#tt-body-page figure.imageblock {
	opacity: 0;
}

Javascript

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

결과 확인

 

이렇게 페이지 스크롤시 이미지 Fade In 되는 효과에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟