노력이 좋아서
<step41>'js_dom, scroll'
zoaseo
2022. 5. 17. 12:11
1) dom_node_ex01.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>
</head>
<body>
<ul>Create a list
</ul>
<script>
let lis = document.querySelectorAll('li');
let ul_ = document.querySelector('ul');
do{
input = prompt('');
let newLi = document.createElement('li');
newLi.innerHTML = input;
ul_.appendChild(newLi);
if(!input){
break;
}
}while( true )
ul_.lastElementChild.remove();
</script>
</body>
</html>2) dom_node_ex01_teach.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>
</head>
<body>
<h1>Create a list</h1>
<script>
let ul = document.createElement('ul');
document.body.append(ul);
while(true){
let data = prompt('리스트 내용을 입력하세요'); //내용을 입력
if(!data){
break; //반복문 종료
}
let li = document.createElement('li'); //li 만들기
li.innerHTML = data; //li의 내용에 data널기
ul.append(li); //ul의 마지막 자식요소로 li 추가하기
}
</script>
</body>
</html>3) dom_node_ex02.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>
</head>
<body>
<ul id="ul">
<li id="one">1</li>
<li id="two">4</li>
</ul>
<script>
let li1 = document.querySelector('#one');
let li4 = document.querySelector('#two');
let li2 = document.createElement('li');
li2.innerHTML = '2';
li1.after(li2);
let li3 = document.createElement('li');
li3.innerHTML = '3';
li4.before(li3);
</script>
</body>
</html>4) dom_node_ex02_teach.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>
</head>
<body>
<ul id="ul">
<li id="one">1</li>
<li id="two">4</li>
</ul>
<script>
let lione = document.querySelector('#one');
//beforebegin 선택한 요소 앞에 삽입
//afterbefore 선택한 요소 첫번째 자식요소 앞에 삽입
//beforeend 선택한 요소 마지막 자식요소 다음에 삽입
//afterend 선택한 요소 다음에 삽입
lione.insertAdjacentHTML('afterend','<li>2</li><li>3</li>');
</script>
</body>
</html>5) translateZ.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;}
body {
width: 100%;
height: 23000px;
}
section {
position: fixed;
width: 1200px;
height: 700px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/* 원근감설정 */
perspective: 2300px;
}
section div {
width: 1200px;
height: 700px;
position: absolute;
top: 0;
left: 0;
background-color: blueviolet;
font-size: 100px;
opacity: 0.3;
}
section div:nth-child(1){
transform: translateZ(0);
}
section div:nth-child(2){
transform: translateZ(-5000px);
}
section div:nth-child(3){
transform: translateZ(-10000px);
}
section div:nth-child(4){
transform: translateZ(-15000px);
}
section div:nth-child(5){
transform: translateZ(-20000px);
}
h1 {
position: fixed;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<h1>0</h1>
<section>
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
</section>
<script>
let divs = document.querySelectorAll('div');
document.addEventListener('scroll', function(){
let sct = document.documentElement.scrollTop;
document.querySelector('h1').innerHTML = sct;
// divs[0].style.transform = `translateZ(${0+sct}px)`;
// divs[1].style.transform = `translateZ(${-5000+sct}px)`;
// divs[2].style.transform = `translateZ(${-10000+sct}px)`;
// divs[3].style.transform = `translateZ(${-15000+sct}px)`;
// divs[4].style.transform = `translateZ(${-20000+sct}px)`;
divs.forEach((div,index)=>{
div.style.transform = `translateZ(${index*(-5000)+sct}px)`;
})
})
</script>
</body>
</html>
6) football.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
</script>
<link rel="stylesheet" href="css/style.css">
<!-- <script src="js/main.js" defer></script> -->
<script src="js/main_ex.js" defer></script>
</head>
<body>
<div class="bg"></div>
<h1><img src="img/logo.png" alt=""></h1>
<div class="topmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
</div>
<ul class="leftnav">
<li><a href="#"><span></span><strong>Player 1</strong></a></li>
<li><a href="#"><span></span><strong>Player 2</strong></a></li>
<li><a href="#"><span></span><strong>Player 3</strong></a></li>
<li><a href="#"><span></span><strong>Player 4</strong></a></li>
<li><a href="#"><span></span><strong>Player 5</strong></a></li>
</ul>
<section>
<!-- 첫번째 컨텐츠 -->
<article>
<img src="img/pic11.png" alt="" class="obj11">
<img src="img/pic12.png" alt="" class="obj12">
<img src="img/player1.png" alt="" class="obj13">
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</article>
<!-- 두번째 컨텐츠 -->
<article>
<img src="img/pic21.png" alt="" class="obj21">
<img src="img/player2.png" alt="" class="obj22">
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</article>
<!-- 세번째 컨텐츠 -->
<article>
<img src="img/pic31.png" alt="" class="obj31">
<img src="img/player3.png" alt="" class="obj32">
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</article>
<!-- 네번째 컨텐츠 -->
<article>
<img src="img/pic41.png" alt="" class="obj41">
<img src="img/pic42.png" alt="" class="obj42">
<img src="img/player4.png" alt="" class="obj43">
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</article>
<!-- 다섯번째 컨텐츠 -->
<article>
<img src="img/pic51.png" alt="" class="obj51">
<img src="img/pic52.png" alt="" class="obj52">
<img src="img/player5.png" alt="" class="obj53">
<div>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</article>
</section>
</body>
</html>style.css
@import url("http://fonts.googleapis.com/css?family=Orbitron");
* { padding: 0; margin: 0;}
li { list-style: none; }
a { text-decoration: none; }
img { border: 0; vertical-align: top; }
body { width: 100%; height: 23000px; font-family:Orbitron;
font-size: 13px; letter-spacing: 2px; }
/* 배경이미지 */
.bg {
position: fixed;
width: 100%;
height: 100vh;
top:0;
left:0;
background: url("../img/bg.jpg") no-repeat center top;
background-size: cover;
}
/* 로고 */
h1 { position: fixed; top: 40px; left: 70px;}
h1 img { width: 130px; }
/* 상단네비 */
.topmenu {
position: fixed; top: 50px; right: 50px;
display: flex;
z-index: 10;
}
.topmenu ul {
display: flex;
}
.topmenu ul:nth-child(1) a {
display: block;
font-size: 14px;
transition: 0.5s;
opacity: 0.5;
}
.topmenu ul:nth-child(1) li {
padding-left: 50px;}
.topmenu ul:nth-child(1) li:hover a {
transform: scale(1.5);
opacity: 1;
}
.topmenu ul a {
color: #fff;
}
.topmenu ul:nth-child(2) {
padding-left:30px;
}
.topmenu ul:nth-child(2) li {
padding-left:20px;
}
.topmenu ul:nth-child(2) .fa {
font-size: 18px;
transition: 0.5s;
transform : scale(1);
}
.topmenu ul:nth-child(2) li:hover .fa {
transform : scale(1.5);
opacity: 1;
}
/* 왼쪽메뉴 */
.leftnav {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 10;
left: 100px;
}
.leftnav li {
width: 150px;
height: 30px;
margin-bottom: 20px;
font-size: 13px;
text-align: center;
position: relative;
}
.leftnav li a { color:#fff; }
.leftnav strong {
position: absolute;
top: 8px;
left: 20px;
font-size: 14px;
}
.leftnav span {
display: block;
width: 3%;
height: 100%;
position: absolute;
transform: skewX(-30deg);
transition: 0.5s;
}
.leftnav li.on span, .leftnav li:hover span {
width: 100%;
}
.leftnav li:nth-child(1) span {
background: #ff0f51;
}
.leftnav li:nth-child(2) span {
background: #fffb02;
}
.leftnav li:nth-child(3) span {
background: #b57de4;
}
.leftnav li:nth-child(4) span {
background: #7cf923;
}
.leftnav li:nth-child(5) span {
background: #3dbdfa;
}
/* 컨텐츠 영역 */
section {
width: 1200px;
height: 700px;
position: fixed;
left: calc(50% - 600px);
top: calc(50% - 350px);
z-index: 1;
perspective: 2300px;
}
section article {
width: 1200px;
height: 700px;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
z-index: 8;
}
section article.on {
z-index: 9;
opacity: 1;
}
section article:nth-child(1){
transform: translateZ(0px);
}
section article:nth-child(2){
transform: translateZ(-5000px);
}
section article:nth-child(3){
transform: translateZ(-10000px);
}
section article:nth-child(4){
transform: translateZ(-15000px);
}
section article:nth-child(5){
transform: translateZ(-20000px);
}
/* 이미지 배치 */
section article img {
position: absolute;
}
section div {
position: absolute; width: 450px;
padding: 30px 60px; color:#fff;
}
section div h3 {
font-size: 60px; letter-spacing:0; line-height: 1.5;
}
/* 첫번째 콘텐츠 */
section article:nth-child(1) div {
bottom: 100px; right: -100px;
}
section article:nth-child(1) h3 {
color: #ff0f51;
}
.obj11 { bottom: -100px; left: -270px; }
.obj12 { top:-85px; right: -598px; }
.obj13 { bottom: 20px; left: -100px;}
/* 두번째 콘텐츠 */
section article:nth-child(2) div {
bottom: 200px; right: -100px;
}
section article:nth-child(2) h3 {
color: #fffb02;
}
.obj21 { bottom: -420px; right: -710px; }
.obj22 { bottom:-100px; right: -50px; }
/* 세번째 콘텐츠 */
section article:nth-child(3) div {
bottom: 200px; right: -100px;
}
section article:nth-child(3) h3 {
color: #b57db4;
}
.obj31 { bottom: 70px; right: 110px; }
.obj32 { bottom:-150px; left: 100px; }
/* 네번째 콘텐츠 */
section article:nth-child(4) div {
bottom: 100px; right: -100px;
}
section article:nth-child(4) h3 {
color:#7cf923;
}
.obj41 { bottom: -150px; left: 350px; }
.obj42 { top: -255px; right: 167px; }
.obj43 { bottom: -120px; left:-100px;}
/* 다섯번째 콘텐츠 */
section article:nth-child(5) div {
bottom: 100px; right: -100px;
}
section article:nth-child(5) h3 {
color: #3dbdfa;
}
.obj51 { bottom: -290px; left:-10px; }
.obj52 { top: 170px; right: 30px; }
.obj53 { bottom: 0; left: -30px; }main.js
let arts = document.querySelectorAll('article');
let lis = document.querySelectorAll('.leftnav li');
lis.forEach((li,index)=>{
li.addEventListener('click',function(e){
//기존에 연결된 이벤트를 제거
e.preventDefault();
window.scrollTo({top: index*5000-1000, behavior:'smooth'})
})
})
document.addEventListener('scroll',function(){
let sct = document.documentElement.scrollTop;
arts.forEach((art,index)=>{
art.style.transform = `translateZ(${index*-5000+sct}px)`;
})
arts.forEach((art,index)=>{
if(sct>=index*5000-1000 && sct<(index+1)*5000-1000){
arts.forEach(art=>art.classList.remove('on'));
arts[index].classList.add('on');
lis.forEach(li=>li.classList.remove('on'));
lis[index].classList.add('on');
}
})
// if(sct>=-1000 && sct<4000){
// arts.forEach(art=>art.classList.remove('on'));
// arts[0].classList.add('on');
// }
// if(sct>=4000 && sct<9000){
// arts.forEach(art=>art.classList.remove('on'));
// arts[1].classList.add('on');
// }
// if(sct>=9000 && sct<14000){
// arts.forEach(art=>art.classList.remove('on'));
// arts[2].classList.add('on');
// }
// if(sct>=14000 && sct<19000){
// arts.forEach(art=>art.classList.remove('on'));
// arts[3].classList.add('on');
// }
// if(sct>=19000 && sct<24000){
// arts.forEach(art=>art.classList.remove('on'));
// arts[4].classList.add('on');
// }
})7) sara.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./main.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="" id="img">
</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>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: scale(1.2) 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%;
}main.js
let secs = [];
for( let i=0; i<201; i++){
secs.push(`img/pic${i}.jpg`);
}
console.log(secs);
document.querySelector('section').addEventListener('mousemove',function(e){
for( let j=0; j<secs.length; j++){
if(e.pageX === 9*j){
document.querySelector('section img').src = secs[j];
}
}
console.log(`x좌표는 ${e.pageX}이고 y좌표는 ${e.pageY}이다.`);
});
let inner = window.innerWidth;
console.log(inner)
let po = inner/201;
console.log(po);main_ex.js
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);
console.log(num)
// 부분/전체 * 100
// 부분/전체 * 200
console.log(e.pageX);
domImg.src = imgArr[num];
})