<script>
document.querySelector("#box").addEventListener("wheel", (e)=>{
//console.log(e.deltaY);
if(e.deltaY>0){//마우스휠을 밑으로 내렸을때
document.querySelector("#box").style.background="skyblue";
document.querySelector("#box").textContent="마우스 휠을 밑으로 내렸습니다.";
}else{//마우스휠을 위로 올렸을때
document.querySelector("#box").style.background="transparent";
document.querySelector("#box").textContent="마우스 휠을 위로 올렸습니다.";
}
})
</script>
휠에다가 이벤트를 주고 해당 이벤트를 if 구문을 사용해서 작업할 수 있다
<style>
#box{
width: 500px; height: 400px;
border: 1px solid rgba(0,0,0,0.2);
background: skyblue;
margin: 100px;
transition: 0.3s;
}
.active{
transform: scale(1.5);
}
</style>
또 다른 활용 예제로는 휠을 사용해 active 클래스를 넣었다 뺏다 하도록 할 것이다.
<script>
let box=document.querySelector("#box");
box.addEventListener("wheel", (e)=>{
if(e.deltaY>0){//양수 즉 휠을 아래로
box.classList.add("active")
}else{
box.classList.remove("active");
}
})
</script>
이 또한 if 구문을 활용할 수 있다.
<body>
<div id="wrap">
<header id="header"></header>
<main id="container">
<section data-idx="0">
<h2>SECTION1</h2>
</section>
<section data-idx="1">
<h2>SECTION2</h2>
</section>
<section data-idx="2">
<h2>SECTION3</h2>
</section>
<section data-idx="3">
<h2>SECTION4</h2>
</section>
</main>
<footer id="footer"></footer>
</div>
섹션으로 구조를 잡고 마우스 휠이 움직일때 섹션에 맞게 이동하도록 할 것이다.
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: inherit;
}
ul{
list-style: none;
}
#header{
height: 100px; width: 100%;
background: rgba(0,0,0,0.7);
position: absolute;
left: 0;top: 0;
z-index: 999;
}
#footer{
height: 300px; background: #444 ;
}
section{
height: 100vh;
padding: 100px 0;
}section h2{
font-size: 100px;
color: #fff;
text-align: center;
}
section:nth-child(1){background: tomato;}
section:nth-child(2){background: gold;}
section:nth-child(3){background: aquamarine;}
section:nth-child(4){background: dodgerblue;}
</style>
먼저 각 섹션을 변수로 선언하고 선언한 변수의 높이값을 innerHeight로 잡아준다. 그리고 해당 변수를 console에 불러보면 해당 높이 값이 불러지게 된다. 여기서 해당 섹션을 속성과 높이가 같기때문에 forEach 구문을 활용해서 잡아주도록 한다.
let sections=document.querySelectorAll("section");
let secH=window.innerHeight;
console.log(secH)
sections.forEach((sec)=>{
sec.addEventListener("wheel", (e)=>{
let index=e.currentTarget.getAttribute("data-idx")
//this가 아닌 currentTarget으로 해당 변수를 정확히 지정해주어야 한다.
console.log(typeof(index));
if(e.deltaY>0){
page=index+1
if(page>3){page=3}
}else{
page=index-1
if(page<=0){page=0}
}
//secH*0, secH*1, secH*2, secH*3
window.scrollTo({top: secH*page, behavior:"smooth"})//각 페이지의 인덱스 번호를 기입하도록 하여서 연산자로 계산해 이벤트가 진행되도록 한다.
})
})
각각 섹션에 sec라는 변수를 새롭게 선언해주고 해당 변수에 휠을 사용한 이벤트를 지정해준다. 그리고 해당 변수를 this로 지정하게 되면 여러 변수이기 때문에 오류가 발생할 수 있어서 currentTatget으로 정확하게 지정해주고 해당 인덱스 번호를 불러온다.
해당 인덱스 번호가 들어가는지 콘솔로 확인하는데 typeof 속성을 사용해서 인덱스를 불러오도록 한다. 그리고 if 구문을 사용해서 휠을 내릴때의 값과 올릴때의 높이 값을 연산식으로 넣어주는데 각각 인덱스 번호에서 1을 더하거나 빼는데 이유는 화면 맨아래에 고정되어야 하기 때문이다.
scrollTo를 사용해 화면에 맞게 부드럽게 이동하도록 지정해주고
sections.forEach((sec)=>{
sec.addEventListener("wheel", (e)=>{
let index=Number(e.currentTarget.getAttribute("data-idx"));
//문자가 아닌 숫자로 지정하여 해당 높이에 맞게 휠이 움직이는것을 확인 할 수 있다.
각각 영역이 같고 반복되는 식이기 때문에 forEach 구문으로
사이드 메뉴 이동 및 영역에 따라 따라오기
위를 활용해서 사이드 메뉴도 똑같이 적용해 볼 수 있다. 앞선 html에서 사이드 메뉴에 해당되는 div태그를 추가해 작성해준다.
<div id="side-menu">
<ul class="menu-list">
<li>
<a href="#" class="link">
<span class="txt">HOME</span>
<span class="cilrcle"></span>
</a>
</li>
<li>
<a href="#" class="link">
<span class="txt">PORTFOLIO</span>
<span class="cilrcle"></span>
</a>
</li>
<li>
<a href="#" class="link">
<span class="txt">WORK</span>
<span class="cilrcle"></span>
</a>
</li>
<li>
<a href="#" class="link">
<span class="txt">CONTECT</span>
<span class="cilrcle"></span>
</a>
</li>
</ul>
</div>
dd
//사이드메뉴 이동
let sideMenu=document.querySelector("#side-menu");
let middle=secH/2 - sideMenu.offsetHeight/2;
console.log(middle)
sideMenu.style.top=`${middle}px`;
window.addEventListener("scroll",()=>{
let scroll=scrollY;
// console.log(scroll);
sideMenu.style.top=`${scroll+middle}px`;
links.forEach((link)=>{
link.classList.remove("active")
})
for(let i=0; i<sections.length; i++){
if(scroll>=sections[i].offsetTop && scroll<sections[i].offsetTop+secH){
links[i].classList.add("active")
}
}
})
ff
'기록 > 수업정리_javascr' 카테고리의 다른 글
| 문서객체생성 (0) | 2024.08.22 |
|---|---|
| GSAP 플러그 - 스크롤 트리거 (0) | 2024.08.19 |
| svg (0) | 2024.08.14 |
| 객체 설명 (0) | 2024.08.12 |
| 내장객체 (날짜정보) (0) | 2024.08.02 |
