[Javascript + CSS3] 화면 스크롤 내릴 때, 이미지 객체 FadeIn 효과 표출 간단하게 구현하기

[Javascript + CSS3] 페이지의 이미지 객체 FadeIn 애니메이션 효과로 표출 간단하게 구현하기

 

 

 

 

1. CSS3

 

 

/*화면에 표출되기 전*/
.animatable {
	visibility: hidden; 
	animation-play-state: paused;
}

/*화면에 표출된 후*/
.animated {
	animation-name: fadeInUp; 
	visibility: visible; 
	animation-fill-mode: both; 
	animation-duration: 2s; 
	animation-play_state:running;
}

@keyframes fadeInUp {
	0% {
	    opacity: 0;
	    transform: translateY(20px);
	}
	100% {
	    opacity: 1;
	    transform: translateY(0);
	}
}

 

 

 

 

2. HTML

 

 

<ul>
	<!-- 애니메이션 효과를 넣을 객체이는 animatable 클래스를 기본으로 줘야함 -->
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
	<li class="animatable"><a href="#"><img src="/test.jpg"></a></li>
</ul>

 

 

 

 

3. Javascript

 

window.onload = function() {
	window.addEventListener("scroll", function(e) {
		scrollEvent();
	});
}

var scrollEvent = function() {
	// 사용자 모니터 화면 높이 + 스크롤이 움직인 높이
	var scroll = window.innerHeight + window.scrollY;
	
    // 애니메이션 효과를 넣을 DOM 객체 배열
	var itemList = document.querySelectorAll(".list_cont li");
	 
	Array.prototype.forEach.call(itemList, function(li){
		// 객체 위치와 높이 비교 : 화면에 표출되는 높이인지 체크
		if(li.offsetTop < scroll) {
			// 객체 animatable 클래스 지우고, animated 클래스 추가
			li.classList.remove("animatable");
			li.classList.add("animated");
		}
	});
}