언니가 친절하게 알려주는 문제를 해결하는 흐름.(with js로 fadeIn 구현)

안녕하세요~

제 동생 제비꽃은 퍼블리셔로 근무중이에요 ^^ 그래서 평소에도 저에게 자주 질문을 하는데요..

오늘은 제비꽃이 제이쿼리 없이 자바스크립트만으로 fadeIn/fadeout을 구현하는방법을 물어봤어요.

그동안 제비꽃이 질문할때마다 코드를 직접 짜줄때도 있었지만.. 이것은 본인의 실력향상에 좋지 않아요..

 

그래서! 문제를 해결하는 흐름에 대해 제비꽃에게 조언해줄겸 질문에 답해줄 겸 해서 간단한 fadeIn, fadeOut을 구현해볼거에요!

 

1) 기본원리

fadeIn, fadeOut은 객체가 서서히 사라지거나, 서서히 나타나게 해주는 메서드에요.

어떻게 그게 가능한걸까요?

그 중심엔 opacity가 있어요

opacity는 css속성(property)중에 하나에요.

0에서 1까지 설정이 가능하고 

0이면 완전히 투명하게, 1이면 완전히 불투명하게 보여요.

 

 

 

 

 

2) 느낌적인 구현

제비꽃씨, opacity가 투명하게, 불투명하게 하는지 알게되었으니.. 어떻게하면 구현할수 있을지 느낌이 오지 않으세요?^^

간단하게 생각해볼게요!

fadeIn : opacity를 0부터 1까지 천천히 올린다!

fadeOut : opacity를 1부터 0까지 천천히 내린다.

 

코드는 아래와같이 되겠네요.

<div id="divWrapper">
	<div style="
		width: 90px;
		height: 90px;
		background-color: rebeccapurple;
		opacity: 0;">
	</div>
</div>


<script>
	var div = document.getElementById("divWrapper").children[0]
	
	for(let i = 0; i <= 1; i += 0.1){
		div.style.opacity = i;
	}

</script>

 

투명한 상태에서 천천히 진해질 줄 알았지만 실행 하자 마자 100%로 진하게 보이네요..

당황하면서 개발자 도구를 열어보니 opacity가 0.9예요..

 

왜그럴까요?

바로바로 반복문의 실행 속도가 무지하게 빠르기 때문이에요 ^__^

 

그러면 어떻게 할까요?

한번 실행되고 한번 쉬고, 를 반복하면 어떨까요?

실행된 모습은 opacity가 이미 0.999가 되어있다. 실행 속도가 너무 빠르기 때문이다.

 

 

3) 똑딱일때마다 함수를 실행하는 setInterval로 opacity를 천천~히 늘려주기

 

구글링 해 보니... 그 중심에는 바로...! setInterval 함수가 있어요!

https://ko.javascript.info/settimeout-setinterval

setTimeout과 setInterval을 이용한 호출 스케줄링

 

위에서 구체적인 예제가 나오네요. 예제를 실행해봅시다.

// 2초 간격으로 실행한다.
let timerId = setInterval(function(){
	console.log("내동생 구박하기!! 찰싹!!")
}, 2000);

 

오 아직 잘 모르겠지만 setInterval로 전달한 익명함수가 두번씩 호출이 되네요! 주기적으로 실행되는것이 마치 메크로늄 같아요.

이 메크로늄이 똑딱거리는 주기마다 opacity를 0.1씩 올리면, 천천히 나타나는 효과가 날것같지 않나요?

 

opacity를 올리는 익명함수를 setInterval에 파라미터로 넘겨볼게요!

 

<div id="divWrapper">
	<div style="
		width: 90px;
		height: 90px;
		background-color: rebeccapurple;
		opacity: 0;">
	</div>
</div>


<script>
	var opacity = 0	//setInterval 에서 증가시킨 값을 유지하기 위해 사용한다.
	var timerId = setInterval(function(){
		var div = document.getElementById("divWrapper").children[0]
			if(opacity <= 1){
				div.style.opacity = opacity;
				opacity += 0.1
			}else{
				clearTimeout(window.timerId) 
			}
			console.log(1)
		
	}, 200);

</script>

setInterval안에 파라미터로 넘어가는 함수 내부에 opacity를 선언하면, 실행할때마다 opacity가 초기화돼요. 그래서 값을 유지하기 위해 전역변수로 선언을 했구요.

opacity가 1이 넘어가면 함수를 호출하는 메트로늄을 꺼야하는데, 이때 clearTimeout함수를 이용해요. 이때 파라미터로는 timerId를 사용하는데 이값은 setInterval-를 호출할때 반환되는 값이예요.

 

실행을 해보면!

 

우리가 의도한대로 천천히 변하고 있어요!

 

4) 이제 화면에 적용해보자! + 여러군데에 적용할 수 있는 함수만들기! + 버튼을 눌렀을때 진해지도록 응용

 

 

+ 번외 궁금증 해결하기

- 많은 반복문을 사용하는데 느리지 않을까?