fade 효과 - setInterval( )

 

 

 

코드펜  https://codepen.io/gamza/pen/QgaRqY?editors=1111

 

▣ 구상

  - 시간의 흐름에 따라 이미지들을 번갈아 보여줍니다.

 

 

▣ 조건

 ➊  컨텐츠의 fadeIn & fadeOut

 ➋  순환

 

 

▣ 준비

 ·  컨텐츠에 들어갈 이미지 3장 ( 600px * 350px )

 

 

 

◆ 레이아웃 ( html, css )

 

1.  내용물을 감싸는 div.wrap 을 추가합니다.

2.  viewport 가 될 div.fade_container 를 추가합니다.

3.  실제로 fade 시킬 <img> 를 3개 추가합니다.

4.  하나의 viewport 에 모두 들어가도록 <img> 를 position : absolute 시킵니다.

     

 

● html

<div id="wrap">
    <div class="fade_container">
    	 <img class="active" src="slide1.jpg" alt="image1" />
		 <img src="slide2.jpg" alt="image2" />
		 <img src="slide3.jpg" alt="image3" />
	</div>
</div>

● css

body {
    background-color:#111;
}
#wrap{
	margin:30px auto;
	width:600px;
}
.fade_container { 
	width:600px; 
	height:350px; 
	border:2px solid gold;        
}
.fade_container img{position:absolute;}

.fade_container .active{
   	z-index:1;
}

 

 

◆ 기능 ( jquery )

초기 : 0째 이미지에 z-index 값을 주어 화면에 우선 노출시킵니다.

1.  1번째 이미지에 z-index 값을 주어 fadeIn 시킵니다. ( 자연히 "0번째 이미지" 의  fadeOut )

2.  0번째 이미지를 숨깁니다. 

3.  애니메이션을 마친 후 0째 이미지를 뒤로 보내고, ( 자연히 "1번째 이미지" 는 "0번째 이미지" 가 됩니다. )

4.  z-index 를 값을 삭제합니다.

5.  1~4 번을 순환시킵니다.

6.  컨텐츠에 마우스를 올려놓으면 애니메이션이 멈추고, 

     마우스가 떠나면 애니메이션이 다시 시작하도록 합니다.

 

● javascript

    
    
   
   // 로직
   
   /*
        0번째 이미지는 css 에서 설정한 active 클래스로 인해 z-index 가 "1"인 상태
        1번째 이미지가 .addClass() 로 인해 z-index 값이 "1"로 동률이 되고
		1번째 이미지는 .css() 로 투명한 상태.
		1번째 이미지가 .animate() 로 1초동안 불투명도값이 1이 된다. (fade 기능)
		0번째 이미지는 부모요소에 .append() 되어 부모의 마지막요소로 바뀌어
          인덱스값이 "2"가 되고,
        1번째 이미지는 자동으로 0번째 이미지가 된다.
		.append() 된 요소는 .removeClass() 로 z-index 값이 "0"이 된다.
	*/
   
   
   var now_img, next_img;
	function fade_change(){
		now_img = $(".fade_container img:eq(0)");
		next_img = $(".fade_container img:eq(1)");
		next_img.addClass("active").css("opacity",0).animate({"opacity":1},1000, function(){
			$(".fade_container").append(now_img);			//콜백
			now_img.removeClass("active");
		});
	}


    // 순환 
    
    /*
        fade_change() 함수를 순환시키는 timer 설정
        mouse hover 로 애니메이션 멈춤/재생   
    
    */
	var timer = setInterval("fade_change()", 4000);
	
	$("div.fade_container").hover(function(){		// mouse enter 시 
		clearInterval(timer);
	}, function(){									// mouse leave 시
		timer = setInterval("fade_change()",4000);
	});