스크롤 이벤트_fade In(페이드인)(vanilla js + css)

 /* Scroll Animation (sa, 스크롤 애니메이션) */
<style>
      .sa {
        opacity: 0;
        transition: all .5s ease;
      }

      /* 아래에서 위로 페이드 인 */
      .sa-up {
        transform: translate(0, 100px);
      }
      /* 위에서 아래로 페이드 인 */
      .sa-down {
        transform: translate(0, -100px);
      }
      /* 왼쪽에서 오른쪽으로 페이드 인 */
      .sa-right {
        transform: translate(-100px, 0);
      }
      /* 오른쪽에서 왼쪽으로 페이드 인 */
      .sa-left {
        transform: translate(100px, 0);
      }
      /* 왼쪽으로 회전하면서 페이드 인 */
      .sa-rotateL {
        transform: rotate(180deg);
      }
      /* 오른쪽으로 회전하면서 페이드 인 */
      .sa-rotateR {
        transform: rotate(-180deg);
      }
      /* 작아진 상태에서 커지면서 페이드 인 */
      .sa-scaleUp {
        transform: scale(.5);
      }
      /* 커진 상태에서 작아지면서 페이드 인 */
      .sa-scaleDown {
        transform: scale(1.5);
      }

      .sa.show {
        opacity: 1;
        transform: none;
      }
</style>

<div class="sa sa-down">위에서 아래로</div>
	
<script>
	const saTriggerMargin = 300;
	const saElementList = document.querySelectorAll('.sa');

	const saFnc = function(){
    	for(const element of saElementList) {
        	if (!element.classList.contains('show')){
            	if(window.innerHeight > element.getBoundingClientRect().top + saTriggerMargin){
                	element.classList.add('show');
            	};
        	};
    	};
	};
	window.addEventListener('scroll', saFnc);
</script>

이해하기

for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.

 

1) '.sa'클래스가 포함된 모든 요소를 saElementList에 선언 (array)

2) element는 saElementList의 배열값을 하나씩 반복함 (const element of saElementList)

3) 만약 element에 클래스명 'show'가 포함되어 있지 않다면

4) window.innerHeight(창 틀을 뺀 브라우저의 높이값) > 뷰포트에서 각 element의 top값(element.getBoundingClientRect().top) + 트리거 마진값 300px 이 충족하면 element에 class 'show'를 추가한다

5) 스크롤 이벤트가 발생하면 saFnc함수 실행

 

알아두기

getBoundingClientRect()는 width, height, top, left, right, bottom, x, y값을 반환한다

width, height는 컨텐츠의 padding, border값까지 포함하여 반환

width, height를 제외한 나머지 값은 뷰포트의 top-left(0,0)을 기준으로 반환하며 상대적인 값이기 때문에 스크롤로 위치가 변경될 때 마다 값이 변경된다

<style>
body{
	padding: 0;
    margin: 0;
}
.contents {
	width: 100px;
    height: 100px;
    padding: 20px;
    border : 40px solid #ddd;
    margin : 50px 0 0 80px
}
</style>

<div class="contents">contents</div>

<script>
const contents = dopcument.querySelector('.contents');
const contentsRect = contents.getBoundingClientRect();

console,.log(contentsRect);
/* DOMRect {
	y: 50,
    x: 80,
    width: 220,
    height: 220,
    top: 50,
    left: 80,
    right: 300,
    bottom: 270
*/
</script>