attach.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
div {
width: 100%;
height: 100vh;
background-size: cover;
background-attachment: fixed;
}
div:nth-child(1) {
background-image: url(../img/img_lights1.jpg);
}
div:nth-child(2) {
background-image: url(../img/img_lights2.jpg);
}
/* ⭐ 요소는 움직이지만 이미지는 고정 ⭐ */
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
swatch.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
li {list-style: none;}
a {color: inherit; text-decoration: none;}
#wrap {
width: 100%;
height: 100vh;
margin: 0 auto;
}
/* 상단 */
#header {
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px;
position: fixed;
}
#header img {
width: 150px;
}
/* 큰 이미지 */
#imgBg > ul {
width: 100%;
height: 100vh;
background-attachment: fixed;
background-size: cover;
}
#imgBg .one {background-image: url(./swath_img/bg1.jpg); position: relative;}
#imgBg .one li img {
position: absolute;
top: 15%;
left: 15%;
}
/* #imgBg .one li img.on {left: 50%;} */
#imgBg .one p.on {color: blueviolet;}
#imgBg .two {background-image: url(./swath_img/bg2.jpg); position: relative;}
#imgBg .two li img {
position: absolute;
top: 15%;
left: 15%;
}
#imgBg .two p.on {color: blue;}
#imgBg .three {background-image: url(./swath_img/bg3.jpg); position: relative;}
#imgBg .three li img {
position: absolute;
top: 15%;
left: 15%;
}
#imgBg .three p.on {color: brown;}
#imgBg .four {background-image: url(./swath_img/bg4.jpg); position: relative;}
#imgBg .four li img {
position: absolute;
top: 15%;
left: 15%;
}
#imgBg .four p.on {color: lightseagreen;}
#imgBg p {
font-size: 50px;
font-weight: bold;
color: #555;
position: relative;
top: 45%;
left: 300px;
}
/* 메뉴 */
#leftMenu {
width: 200px;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
#leftMenu li {
padding: 10px 0;
text-align: right;
border-top: 1px solid #555;
transition: 0.7s;
}
#leftMenu li:nth-child(1).on {
border-top: 2px solid blueviolet;
color: blueviolet;
font-weight: bold;
}
#leftMenu li:nth-child(2).on {
border-top: 2px solid blue;
color: blue;
font-weight: bold;
}
#leftMenu li:nth-child(3).on {
border-top: 2px solid brown;
color: brown;
font-weight: bold;
}
#leftMenu li:nth-child(4).on {
border-top: 2px solid lightseagreen;
color: lightseagreen;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<ul><img src="./swath_img/logo.png" alt=""></ul>
<ul><img src="./swath_img/sns_흑백.png" alt=""></ul>
</div>
<div id="imgBg">
<ul class="one">
<li>
<img src="./swath_img/obj12.png" alt="">
<img src="./swath_img/obj11.png" alt="">
<img src="./swath_img/obj13.png" alt="">
</li>
<p>Full Blossom</p>
</ul>
<ul class="two">
<li>
<img src="./swath_img/obj21.png" alt="">
<img src="./swath_img/obj22.png" alt="">
</li>
<p>Be Colorful</p>
</ul>
<ul class="three">
<li>
<img src="./swath_img/obj31.png" alt="">
<img src="./swath_img/obj32.png" alt="">
<img src="./swath_img/obj33.png" alt="">
</li>
<p>Time on Board</p>
</ul>
<ul class="four">
<li>
<img src="./swath_img/obj41.png" alt="">
<img src="./swath_img/obj42.png" alt="">
</li>
<p>Shiny Addict</p>
</ul>
</div>
<div id="leftMenu">
<ul>
<li>
<a href=""></a>
Full Blossom
</li>
<li>
<a href=""></a>
Be Colorful
</li>
<li>
<a href=""></a>
Time on Board
</li>
<li>
<a href=""></a>
Shiny Addict
</li>
</ul>
</div>
</div>
<script>
let lis = document.querySelectorAll('#leftMenu > ul > li');
let Ps = document.querySelectorAll('ul p');
// let img = document.querySelector;
let wh = window.innerHeight;
// ⭐클릭시 이동
// (1)
lis.forEach((li, index) => {
li.addEventListener('click', function() {
window.scrollTo({top: index*wh, behavior:'smooth'});
})
})
// (2)
// lis[0].addEventListener('click', function() {
// window.scrollTo({top:0});
// })
// lis[1].addEventListener('click', function() {
// window.scrollTo({top:959});
// })
// lis[2].addEventListener('click', function() {
// window.scrollTo({top:1918});
// })
// lis[3].addEventListener('click', function() {
// window.scrollTo({top:2894});
// })
// ⭐스크롤시 메뉴 스타일 변경
document.addEventListener('scroll', function() {
let sct = document.documentElement.scrollTop;
console.log(sct);
for (let i=0; i<lis.length; i++) {
if (sct >= wh*i && sct < wh*(i+1)) {
lis.forEach(li => li.classList.remove('on'));
lis[i].classList.add('on');
}
if (sct >= wh*i && sct < wh*(i+1)) {
Ps.forEach(li => li.classList.remove('on'));
Ps[i].classList.add('on');
console.log('색 바뀌는지 확인용')
}
}
})
</script>
</body>
</html>
