js) 스크롤 이벤트 - offsetTop과 scrollY

스크롤의 위치에 따라 실행되는 애니메이션을 만들어볼건데요~

스크롤 이벤트라고 하죠?

 

스크롤을 내릴 때마다 svg애니메이션이 돌아가게 하는 결과물이구요

svg애니메이션은 나중에 또 따로 포스팅을 하기로 해요

실은 순서대로 하는게 맞는데 그러다보니 자꾸 밀려서;;;

 

일단 html구조 자체를 한섹션씩 짜버리게 했습니다.

ob리뉴얼 섹션1

이미지 + 텍스트박스 + cass svg 를 한 박스로 묶어서 네개를 만들고

svg는 absolute처리를 했구요

 

// SVG HTML

<svg width=520 height=220 class="name2">
        <text x="0" y="50%">h</text>
        <text x="90" y="50%">a</text>
        <text x="170" y="50%">n</text>
        <text x="265" y="50%">m</text>
        <text x="400" y="50%">a</text>
        <text x="470" y="50%">c</text>
    </svg>

 

// SVG CSS

/*svg*/
@keyframes stroke {
	0%   {
		stroke:#fff;
		stroke-width: 1px;
		stroke-dashoffset: 326px;
	}
	70% {
		fill: transparent;
	}
	98% {
		stroke:#fff;
		stroke-width: 1px;
	}
	100% {
		fill: rgba(255, 255, 255, 0.2);
		stroke-dashoffset: 0px;
	}
}
svg { 
	position:absolute; 
	z-index: 5;
}
svg.name1 {
	top: 80px;
	left: 50px;
}
svg.name2 { 
	top: 25%;
	right: 6px;
}
svg.name3 { 
	bottom: 40%;
	left: 20px;
}
svg.name4 {
	bottom: -30px;
	right: -27px;
}
svg text {
	font-family: 'Roboto Serif', serif;
	font-size: 14rem;
	fill: transparent;
	stroke-dasharray: 326px;
}
svg.on text {
	animation: stroke 1s linear;
	animation-fill-mode: forwards;
}
svg:first-child text {
	font-size: 15rem;
}
svg text:nth-child(1) {
	animation-delay: 0s;
}
svg text:nth-child(2) {
	animation-delay: 0.5s;
}
svg text:nth-child(3) {
	animation-delay: 1s;
}
svg text:nth-child(4) {
	animation-delay: 1.5s;
}
svg text:nth-child(5) {
	animation-delay: 2s;
}
svg text:nth-child(6) {
	animation-delay: 2.5s;
}
svg text:nth-child(7) {
	animation-delay: 3s;
}

 

const content = document.querySelectorAll('.brand-list > ul')

//scrollHnadler 함수 실행
function scrollHandler() {
	// content배열의 각 요소에 대한 반복문 실행
    content.forEach((el) => {
    	// 변수에 현재 반복중인 요소를 할당
        const offsetEle = el
        // 변수에 현재 요소의 상단에서 부모 요소까지의 거리를 할당
        const offsetTop = el.offsetTop
        // 변수에 현재 윈도우의 수직 스크롤 위치를 할당
        const scrollY = window.scrollY

        console.log(offsetEle, offsetTop, scrollY)
		
        // 스크롤 위치가 offsetTop보다 크면 실행하는 조건식
        if (scrollY > offsetTop) {
           // el요소의 자식 중에 svg요소를 찾아 변수 할당
            const offsetEleChild = el.querySelector('svg');
            // iffsetEleChild 존재한다면 코드 실행
            if (offsetEleChild) {
                offsetEleChild.classList.add('on');
            }
        }

    });

}
window.addEventListener('scroll', scrollHandler)