Stack/JavaScript
[JS] Scroll
7ingout
2022. 5. 16. 14:05
scrollTop 스크롤한 값
window.scrollTo({ top: 100px }) 스크롤 100px의 위치로 이동
scrollTop.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>
* { padding: 0; margin: 0; box-sizing: border-box; }
div {
width: 100%;
height: 100vh;
}
div:nth-child(2) {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
div:nth-child(3) {
background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
}
div:nth-child(4) {
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
#menu {
position: fixed;
width: 200px;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#menu li {
line-height: 40px;
color: #fff;
padding-left: 30px;
font-size: 20px;
transition: 0.5s;
}
#menu li.on {
font-size: 30px;
padding: 5px 30px;
}
</style>
</head>
<body>
<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
<div>box01</div>
<div>box02</div>
<div>box03</div>
<script>
let lis = document.querySelectorAll('li');
let wh = window.innerHeight; // 화면 100% 높이값을 wh에 할당
// lis[0].addEventListener('click', function(){
// window.scrollTo({top:0*wh, behavior: 'smooth'});
// })
// lis[1].addEventListener('click', function(){
// window.scrollTo({top:1*wh, behavior: 'smooth'});
// })
// lis[2].addEventListener('click', function(){
// window.scrollTo({top:2*wh, behavior: 'smooth'});
// })
lis.forEach((li,index) => {
let sct = document.documentElement.scrollTop;
li.addEventListener('click', function(){
window.scrollTo({top:index*wh, behavior: 'smooth'});
})
chSize(sct);
})
document.addEventListener('scroll',function() {
let sct = document.documentElement.scrollTop;
console.log(sct);
chSize(sct);
})
function chSize(sct) {
// if (sct >= 0 && sct < wh ) {
// lis.forEach(li => li.classList.remove('on'));
// lis[0].classList.add('on');
// // lis[1].classList.remove('on');
// // lis[2].classList.remove('on');
// } else if (sct >= wh && sct < 2*wh) {
// lis.forEach(li => li.classList.remove('on'));
// // lis[0].classList.remove('on');
// lis[1].classList.add('on');
// // lis[2].classList.remove('on');
// } else {
// lis.forEach(li => li.classList.remove('on'));
// // lis[0].classList.remove('on');
// // lis[1].classList.remove('on');
// lis[2].classList.add('on');
// }
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');
}
}
}
</script>
</body>
</html>
scroll_ex.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>
<style>
* { padding: 0; margin: 0; box-sizing: border-box;}
.bg{
width: 100%;
height: 100vh;
position: relative;
}
#bg1 {
background: url(./img/bg1.jpg) center center/100% no-repeat;
background-attachment: fixed;
}
#bg2 {
background: url(./img/bg2.jpg) center center/100% no-repeat;
background-attachment: fixed;
}
#bg3 {
background: url(./img/bg3.jpg) center center/100% no-repeat;
background-attachment: fixed;
}
#bg4 {
background: url(./img/bg4.jpg) center center/100% no-repeat;
background-attachment: fixed;
}
#deco1_1 {
background: url(./img/obj11.png) center center/100% no-repeat;
position: absolute;
width: 1000px;
height: 500px;
left: 600px;
top: 350px;
}
#deco1_2 {
background: url(./img/obj12.png) center center/100% no-repeat;
position: absolute;
width: 1000px;
height: 500px;
left: 600px;
top: 350px;
}
#deco1_3 {
background: url(./img/obj13.png) center center/100% no-repeat;
position: absolute;
width: 250px;
height: 500px;
right: 50px;
top: 250px;
}
#deco2_1 {
background: url(./img/obj21.png) center center/100% no-repeat;
position: absolute;
width: 1000px;
height: 500px;
left: 600px;
top: 350px;
}
#deco2_2 {
background: url(./img/obj22.png) center center/100% no-repeat;
position: absolute;
width: 1000px;
height: 500px;
right: 50px;
top: 250px;
}
#deco3_1 {
background: url(./img/obj31.png) center center/100% no-repeat;
position: absolute;
width: 200px;
height: 100px;
left: 800px;
top: 350px;
}
#deco3_2 {
background: url(./img/obj32.png) center center/100% no-repeat;
position: absolute;
width: 100px;
height: 100px;
left: 700px;
top: 450px;
}
#deco3_3 {
background: url(./img/obj33.png) center center/100% no-repeat;
position: absolute;
width: 200px;
height: 400px;
right: 50px;
top: 250px;
}
#deco4_1 {
background: url(./img/obj41.png) center center/100% no-repeat;
position: absolute;
width: 1000px;
height: 500px;
left: 600px;
top: 350px;
}
#deco4_2 {
background: url(./img/obj42.png) center center/100% no-repeat;
position: absolute;
width: 1000px;
height: 500px;
right: 50px;
top: 250px;
}
header {
position: absolute;
left: 50px;
top: 50px;
background: url(./img/logo.png) center center/100% no-repeat;
color: transparent;
width: 220px;
position: fixed;
}
section {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
position: fixed;
width: 100%;
}
ul {
width: 300px;
}
li {
list-style: none;
text-align: right;
width: 100%;
line-height: 70px;
transition: 0.5s;
height: 70px;
border-top: 1px solid #000;
}
li.on {
color: crimson;
font-size: 24px;
font-weight: bold;
border-top-color: crimson;
}
#content {
position: absolute;
padding-left: 50px;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
h2 {
color: crimson;
font-size: 52px;
}
#SNS {
display: flex;
position: absolute;
top: 5px;
right: -1580px
/* width: 20px; */
}
#SNS img {
width: 35px;
}
#SNS div:nth-child(1) {
margin-right: 13px;
}
#SNS div:nth-child(2) {
margin-right: 20px;
}
</style>
<body>
<div id="bg1" class="bg">
<div id="deco1_1"></div>
<div id="deco1_2"></div>
<div id="deco1_3"></div>
</div>
<div id="bg2" class="bg">
<div id="deco2_1"></div>
<div id="deco2_2"></div>
</div>
<div id="bg3" class="bg">
<div id="deco3_1"></div>
<div id="deco3_2"></div>
<div id="deco3_3"></div>
</div>
<div id="bg4" class="bg">
<div id="deco4_4"></div>
<div id="deco4_4"></div>
<div id="deco4_4"></div>
</div>
<header>
<h1>SWATCH</h1>
<div id="SNS">
<div><a href="#"><img src="./img/f.png" alt=""></a></div>
<div><a href="#"><img src="./img/i.png" alt=""></a></div>
<div><a href="#"><img src="./img/t.png" alt=""></a></div>
</div>
</header>
<section>
<ul>
<li>Full Blossom</li>
<li>Be Colorful</li>
<li>Time on Board</li>
<li>Shiny Addict</li>
</ul>
<div>
<div id="content">
<h2></h2>
<p>Loren ipsum dolor sit amet. cons ~~~</p>
</div>
</div>
</section>
<script>
let lis = document.querySelectorAll('li');
let wh = window.innerHeight;
let h2s = document.querySelector('h2');
lis.forEach((li,index) => {
let sct = document.documentElement.scrollTop;
li.addEventListener('click', function(){
window.scrollTo({top:index*wh, behavior: 'smooth'});
})
chSize(sct);
chContent(sct);
})
document.addEventListener('scroll',function() {
let sct = document.documentElement.scrollTop;
console.log(sct);
chSize(sct);
chContent(sct);
})
function chSize(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');
}
}
}
function chContent(sct) {
if (sct >= wh && sct < 2*wh) {
h2s.innerHTML = 'Be Colorful';
} else if ( sct >= 2*wh && sct<3*wh) {
h2s.innerHTML = 'Time on Board';
} else if( sct >= 3*wh && sct < 4*wh) {
h2s.innerHTML = 'Shiny Addict';
} else if ( sct>= 0 && sct<wh ) {
h2s.innerHTML = 'Full Blossom';
}
}
// document.querySelector('.bg').addEventListener('mousemove',function(e){
// document.querySelector('#deco1').style.left=`${e.pageX}px`;
// document.querySelector('#deco1').style.top=`${e.pageY}px`;
// console.log(`x좌표는 ${e.pageX}이고, y좌표는 ${e.pageY}이다.`);
// });
</script>
</body>
</html>
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>
football_t / index.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> -->
</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>
<script>
let arts = document.querySelectorAll('article');
let lis = document.querySelectorAll('.leftnav li');
lis.forEach((li, index)=>{
li.addEventListener('click',function(e){
// 기존에 연결된 이벤트를 제거; a 태그에는 이미 이벤트가 존재해서 지워줘야 함
e.preventDefault();
window.scrollTo({top: index*5000-1000, behavior: 'smooth' })
})
})
document.addEventListener('scroll', function(){
let sct = document.documentElement.scrollTop;
console.log(sct);
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');
// }
// })
for(let i = 0; i<arts.length; i ++) {
if(sct>= i*5000-1000 && sct<(i+1)*5000-1000) {
arts.forEach(art=>art.classList.remove('on'))
arts[i].classList.add('on');
lis.forEach(li=>li.classList.remove('on'));
lis[i].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');
// }
})
</script>
</body>
</html>
football_t / 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; }