Stack/JavaScript
[JS] sarar
7ingout
2022. 6. 13. 12:27
http://hyodev.dothome.co.kr/sarar/
Document
hyodev.dothome.co.kr
sarar / index.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script defer src="./script.js"></script>
</head>
<body>
<div id="back"></div>
<!-- 상단 제목 -->
<header>
<h1><img src="img/logo.png" alt=""></h1>
</header>
<!-- 메뉴 -->
<nav>
<ul>
<li>
<a href="">COLLECTION</a>
<div>
<div><img src="img/thumb1.jpg" alt=""></div>
<h2>COLLECTION</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">STORE LOCATION</a>
<div>
<div><img src="img/thumb2.jpg" alt=""></div>
<h2>STORE LOCATION</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">ADVERTISEMENT</a>
<div>
<div><img src="img/thumb3.jpg" alt=""></div>
<h2>ADVERTISEMENT</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">ONLINE STORE</a>
<div>
<div><img src="img/thumb4.jpg" alt=""></div>
<h2>ONLINE STORE</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">CONTACT</a>
<div>
<div><img src="img/thumb5.jpg" alt=""></div>
<h2>CONTACT</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">CORPORATE</a>
<div>
<div><img src="img/thumb6.jpg" alt=""></div>
<h2>CORPORATE</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<!-- 이미지 -->
<section>
<img src="img/pic50.jpg" alt="">
</section>
<!-- 하단 -->
<footer>
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">News letter</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Credits</a></li>
<li><a href="#">Privacy Notice</a></li>
</ul>
<span>Copyright (c) 2018 SARAR INT All Rights Reserved.</span>
</footer>
</body>
</html>
sarar / script.js
let img_arr = [];
for (let i = 0; i < 201; i++) {
img_arr[i] = `./img/pic${i}.jpg`;
}
document.querySelector('section').addEventListener('mousemove',function(e){
let wwid = 1920 / 201
for(let i = 0; i < img_arr.length; i++) {
if( e.pageX == Math.round(wwid * i)) {
document.querySelector('section img').src=img_arr[i];
}
}
});
sarar / style.css
* { padding: 0; margin: 0; box-sizing: border-box;}
li { list-style: none;}
a { text-decoration: none; color: inherit;}
#back {
background-color: #000;
width: 100%;
height: 100vh;
}
header {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 80px;
}
nav {
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 50px;
color: #fff;
z-index: 2;
}
nav > ul {
width: 1200px;
margin: 0 auto;
display: flex;
}
nav > ul > li {
width: 16.6666%;
position: relative;
text-align: center;
}
nav > ul > li > a {
line-height: 50px;
}
nav > ul > li > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
border: 1px solid #000;
background-color: rgba(0,0,0,0.7);
text-align: center;
padding-bottom: 20px;
opacity: 0;
transition: 0.5s;
}
/* 호버설정 */
nav > ul > li:hover > div {
opacity: 1;
transform: rotateY(360deg) translateY(-100px);
}
nav > ul > li > div div {
height: 100px;
padding: 16px;
text-align: center;
overflow: hidden;
width: 100%;
}
nav > ul > li > div div img {
width: 100%;
}
nav > ul > li > div h2 {
font-size: 18px;
line-height: 50px;
}
nav > ul > li li {
line-height: 30px;
}
section {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 60vh;
overflow: hidden;
}
section img {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
footer {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
text-align: center;
color: #fff;
padding-bottom :20px;
}
footer ul {
width: 1200px;
margin: 0 auto;
display: flex;
line-height: 50px;
padding-bottom :20px;
}
footer ul li {
width: 16.6666%;
}
sarar / css / stryle.css_teacher
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none; color: inherit; }
body { font-size: 14px; line-height: 1.6; background-color: #000;
color: #fff; }
header {
text-align: center;
padding: 40px;
}
header img {
width: 20%;
min-width: 320px;
}
nav {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 60px;
z-index: 2;
}
nav > ul {
width: 1200px;
margin: 0 auto;
display: flex;
}
nav > ul > li {
width: 16.6666%;
line-height: 60px;
text-align: center;
position: relative;
}
nav > ul > li li {
line-height: 40px;
}
nav > ul > li > div {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
padding: 10px;
top: -60px;
opacity: 0;
transition: 0.5s;
}
nav > ul > li:hover > div {
top: -110px;
opacity: 1;
transform: rotateY(360deg);
}
nav > ul > li > div div {
width: 100%;
height: 100px;
overflow: hidden;
}
nav img {
width: 120%;
}
nav > ul > li h2 {
font-size: 18px;
}
section {
width: 100%;
height: 70vh;
overflow: hidden;
position: relative;
}
section img {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
footer {
width: 1200px;
margin: 0 auto;
padding: 30px 0;
}
footer ul {
display: flex;
padding-bottom: 20px;
}
footer ul li {
width: 16.6666%;
text-align: center;
}
sarar / js / main.js_teacher
let sec = document.querySelector('section');
let domImg = document.querySelector('#img')
let imgArr = [];
for(let i = 0; i <= 200; i++) {
imgArr.push(`img/pic${i}.jpg`);
}
sec.addEventListener('mousemove', function(e){
let winw = window.innerWidth;
let num = Math.floor(e.pageX/winw * 200);
// 부분/전체 * 100 => %
// 부분/전체 * 200 => 200% 기준 백분율
console.log(imgArr[num]);
domImg.src = imgArr[num];
})