300x250
💡 목표
외부 라이브러리 없이 바닐라JS로 스크롤 이벤트 구현
📌 HTML
<div class="wrap">
<header id="header">Header</header>
<body id="body">
<div class="scroll scrollRight">Go Right</div>
<div class="scroll scrollLeft">Go Left</div>
<div class="scroll scrollUp">Go Up</div>
<div class="scroll scrollDown">Go Down</div>
<div class="delayScale">
<ul>
<li class="delayList">1</li>
<li class="delayList">2</li>
<li class="delayList">3</li>
</ul>
</div>
</body>
</div>
📌 CSS
/* reset */
.wrap { width: 100%; margin: 0 auto; background-color: #eee; }
li { list-style: none; }
#header,
#body { width: 50vw; margin: 0 auto; text-align: center; }
#header { position: sticky; top: 0; left: 0; height: 5vw; margin-bottom: 20vw; line-height: 5vw; background-color: #ccc; z-index: 999; }
#body .scroll { margin: 20vw auto; border-radius: 50%; }
#body .scroll,
#body .delayScale .delayList { width: 15vw; height: 15vw; line-height: 15vw;}
#body .delayScale ul { display: flex; align-items: center; justify-content: space-between; padding-left: 0; }
#body .delayScale ul.on .delayList { animation: scale 1s 1 forwards; background-color: #ff8181; opacity: 0; }
/* background color */
#body .scroll.scrollUp { background-color: #81d1ff; }
#body .scroll.scrollDown { background-color: #ff81a7; }
#body .scroll.scrollLeft { background-color: #fff281; }
#body .scroll.scrollRight { background-color: #ff8181; }
/* scroll */
.scroll { opacity: 0; transition: 0.8s; }
.scrollRight { transform: translate(-20vw, 0); }
.scrollLeft { transform: translate(20vw, 0); }
.scrollUp { transform: translate(0, 10vw); }
.scrollDown { transform: translate(0, -10vw); }
.scrollAction { opacity: 1; transform: translate(0); }
/* animation */
@keyframes opacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes scale {
0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}
📌 JavaScript
// Header 포함 높이 계산
const windowHeightWithHeader = window.innerHeight + document.querySelector("#header").offsetHeight;
// 스크롤 이벤트 핸들러
function scrollAction() {
const scrollElements = document.querySelectorAll(".scroll");
if (!scrollElements) {
return;
}
scrollElements.forEach((scrollElement) => {
const scrollHeight = scrollElement.getBoundingClientRect().top + 200;
scrollElement.classList.toggle("scrollAction", windowHeightWithHeader > scrollHeight);
});
}
// 애니메이션 이벤트 핸들러
function scaleEvent(selector) {
const imgWrap = document.querySelector(selector);
const imgWrapHeight = imgWrap && imgWrap.getBoundingClientRect().top;
if (imgWrap && imgWrapHeight) {
imgWrap.classList.toggle("on", windowHeightWithHeader > imgWrapHeight);
}
}
// 애니메이션 delay 설정
function aniDelay(elements, delay) {
elements.forEach((element, index) => {
element.style.animationDelay = delay * index + "s";
});
}
// 실행
const delayList = document.querySelectorAll('.delayList');
document.addEventListener("scroll", function() {
scrollAction();
scaleEvent('.delayScale ul');
});
document.addEventListener("DOMContentLoaded", function() {
aniDelay(delayList, 0.3);
});
💛 결과물
11,072종의 무료 html 아이콘
SVG, PSD, PNG, EPS 포맷 또는 웹폰트로 제공되는 11,072종 이상의 html 아이콘을 다운로드받으세요. 최대의 무료 아이콘 데이터베이스 - Flaticon.
www.flaticon.com
반응형
'퍼블리싱 > Vanilla JS' 카테고리의 다른 글
| [Vanilla JS] 숫자 상승 애니메이션 / 카운트 애니메이션 (0) | 2023.10.27 |
|---|---|
| [Vanilla JS] 무한 슬라이드 구현 (0) | 2023.10.27 |
| [Vanilla JS] 무한루프 슬라이드 구현 (1) | 2023.10.27 |
| [Vanilla JS] 탭 메뉴 구현 / 버튼마다 다른 컨텐츠 보여주기 (0) | 2023.10.27 |
