패랠랙스 스크로링 효과 - 닷 메뉴
이 세상에는 하나의 괴물이 있다. 그것은 바로 게으름이다. - 토마스 칼라일
오늘 할 수 있는 일을 내일로 미루지 말라. - 벤자민 프랭클린
게으른 두뇌는 악마의 공장이다. - 영국 속담
모든 죄악의 근본은 조바심과 게으름이다. - 카프카
게으를 때는 게으름을 알지 못한다. - 하루히 센안
게으름은 마귀의 배게다. - 네덜란드 속담
근면은 행운의 어머니이다. - 이탈리아 속담
근면과 성실이 있으면 불가능한 일은 거의 없다. - 존슨
사용하지 않는 철은 곧 녹슬어 버린다. - 포르투갈 속담
<!DOCTYPE html>
<html lang="ko">
<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>Parallax Effect</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/highlight.css">
</head>
<body class="parallax">
<!-- header -->
<header class="paraInfo">
<h1><a href="index.html">Parallax Effect01 - javascript</a></h1>
<p>패랠랙스 스크로링 효과 - 메뉴 이동</p>
</header>
<!-- //header -->
<!-- main -->
<main>
<div class="paraScroll">window.scrollY : <span>0</span></div>
<div class="paraInfo2">
<ul>
<li>section1 offset(): <span class="offset1">0</span></li>
<li>section2 offset(): <span class="offset2">0</span></li>
<li>section3 offset(): <span class="offset3">0</span></li>
<li>section4 offset(): <span class="offset4">0</span></li>
<li>section5 offset(): <span class="offset5">0</span></li>
<li>section6 offset(): <span class="offset6">0</span></li>
<li>section7 offset(): <span class="offset7">0</span></li>
<li>section8 offset(): <span class="offset8">0</span></li>
<li>section9 offset(): <span class="offset9">0</span></li>
</ul>
</div>
<!--//scroll-->
<div class="paraNav">
<ul>
<li class="active"><a href="#section1">s1</a></li>
<li><a href="#section2">s2</a></li>
<li><a href="#section3">s3</a></li>
<li><a href="#section4">s4</a></li>
<li><a href="#section5">s5</a></li>
<li><a href="#section6">s6</a></li>
<li><a href="#section7">s7</a></li>
<li><a href="#section8">s8</a></li>
<li><a href="#section9">s9</a></li>
</ul>
</div>
<!-- //nav -->
<div class="paraCont">
<section id="section1" class="content-item">
<span class="num">01</span>
<h2 class="title">Section1</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">이 세상에는 하나의 괴물이 있다. 그것은 바로 게으름이다. - 토마스 칼라일</p>
</section>
<!-- section1 -->
<section id="section2" class="content-item">
<span class="num">02</span>
<h2 class="title">Section2</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">오늘 할 수 있는 일을 내일로 미루지 말라. - 벤자민 프랭클린</p>
</section>
<!-- section2 -->
<section id="section3" class="content-item">
<span class="num">03</span>
<h2 class="title">Section3</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">게으른 두뇌는 악마의 공장이다. - 영국 속담</p>
</section>
<!-- section3 -->
<section id="section4" class="content-item">
<span class="num">04</span>
<h2 class="title">Section4</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">모든 죄악의 근본은 조바심과 게으름이다. - 카프카</p>
</section>
<!-- section4 -->
<section id="section5" class="content-item">
<span class="num">05</span>
<h2 class="title">Section5</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">게으를 때는 게으름을 알지 못한다. - 하루히 센안</p>
</section>
<!-- section5 -->
<section id="section6" class="content-item">
<span class="num">06</span>
<h2 class="title">Section6</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">게으름은 마귀의 배게다. - 네덜란드 속담</p>
</section>
<!-- section6 -->
<section id="section7" class="content-item">
<span class="num">07</span>
<h2 class="title">Section7</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">근면은 행운의 어머니이다. - 이탈리아 속담</p>
</section>
<!-- section7 -->
<section id="section8" class="content-item">
<span class="num">08</span>
<h2 class="title">Section8</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">근면은 행운의 어머니이다. - 이탈리아 속담</p>
</section>
<!-- section8 -->
<section id="section9" class="content-item">
<span class="num">09</span>
<h2 class="title">Section9</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">근면과 성실이 있으면 불가능한 일은 거의 없다. - 존슨</p>
</section>
<!-- section9 -->
</div>
<!-- //contents -->
</main>
<!-- //main -->
<!-- footer -->
<footer class="paraFooter">
</footer>
<!-- //footer -->
<!-- source -->
<div class="source">
<button onclick="modal()">소스보기</button>
</div>
<!-- //source -->
</body>
</html>
.parallax {
background: #222;
color: #fff;
font-family: "S-CoreDream";
position: relative;
}
.parallax .source {
position: absolute;
right: 10px;
bottom: 10px;
}
.parallax .source button {
background: transparent;
border: 1px solid #fff;
padding: 5px 10px;
color: #fff;
border-radius: 50px;
box-shadow: 0 0 0 #fff inset;
transition: all 0.4s;
cursor: pointer;
}
.parallax .source button:hover {
box-shadow: 0 -50px 0 #fff inset;
color: #000;
}
.paraScroll {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 1000;
background: rgba(0, 0, 0, 0.4);
color: #fff;
height: 40px;
line-height: 40px;
border-radius: 50px;
text-align: center;
font-size: 12px;
padding: 0 20px;
}
.paraInfo2 {
position: fixed;
left: 20px;
bottom: 70px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 12px;
border-radius: 10px;
line-height: 1.8;
padding: 20px;
z-index: 1000;
}
.paraInfo2 li {
list-style: none;
}
.paraNav {
position: fixed;
right: 20px;
top: 20px;
z-index: 1000;
background: rgba(0, 0, 0, 0.4);
padding: 15px 20px;
border-radius: 50px;
}
.paraNav li {
display: inline-block;
list-style: none;
}
.paraNav li a {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
}
.paraNav li.active a {
background: #fff;
color: #000;
border-radius: 50%;
}
.paraInfo {
padding: 20px;
}
.paraInfo h1 {
display: inline-block;
font-size: 20px;
border-bottom: 1px dashed #fff;
margin-bottom: 8px;
font-weight: 400;
}
.paraInfo h1 a {
color: #fff;
text-decoration: none;
}
.paraInfo p {
font-size: 14px;
line-height: 1.8;
}
.paraCont {
width: 100%;
overflow: hidden;
}
.paraCont .content-item {
width: 1000px;
max-width: 70vw;
margin: 30vw 0;
padding-top: 10vw;
text-align: right;
position: relative;
}
.paraCont .content-item .num {
font-family: "Lato";
font-weight: 100;
font-size: 25vw;
opacity: 0.07;
position: absolute;
right: -5vw;
top: -10vw;
}
.paraCont .content-item .title {
padding-bottom: 10px;
font-weight: 500;
}
.paraCont .content-item .img-Wrap {
width: 100%;
padding-bottom: 56%;
background: #000;
position: relative;
}
.paraCont .content-item .img-Wrap .img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
filter: saturate(0%);
transition: all 0.8s;
}
.paraCont .content-item .img-Wrap .img:hover {
filter: saturate(100%);
}
.paraCont .content-item .desc {
font-size: 6vw;
line-height: 1.4;
margin-top: -6vw;
margin-right: -3vw;
position: relative;
z-index: 100;
word-break: keep-all;
}
.paraCont .content-item:nth-child(even) {
margin-left: auto;
text-align: left;
}
.paraCont .content-item:nth-child(even) .num {
right: auto;
left: -5vw;
}
.paraCont .content-item:nth-child(even) .desc {
margin-right: auto;
margin-left: -3vw;
}
.content-item:nth-child(1) .img {
background: url(../img/bg01.jpg);
}
.content-item:nth-child(2) .img {
background: url(../img/bg02.jpg);
}
.content-item:nth-child(3) .img {
background: url(../img/bg03.jpg);
}
.content-item:nth-child(4) .img {
background: url(../img/bg04.jpg);
}
.content-item:nth-child(5) .img {
background: url(../img/bg05.jpg);
}
.content-item:nth-child(6) .img {
background: url(../img/bg06.jpg);
}
.content-item:nth-child(7) .img {
background: url(../img/bg07.jpg);
}
.content-item:nth-child(8) .img {
background: url(../img/bg08.jpg);
}
.content-item:nth-child(9) .img {
background: url(../img/bg09.jpg);
}
.content-item:nth-child(10) .img {
background: url(../img/bg10.jpg);
}
document.querySelectorAll('.paraDot ul li a').forEach((el, idx) => {
el.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(el.getAttribute('href')).scrollIntoView({
behavior: "smooth"
});
});
});
window.addEventListener('scroll', () => {
let scrollTop = document.documentElement.scrollTop || window.scrollY || window.pageYOffset;
document.querySelector('.paraScroll span').innerText = parseInt(scrollTop) + 'px';
document.querySelectorAll('.paraDot ul li').forEach((li, idx) => {
if (scrollTop > document.getElementById('section' + (idx + 1)).offsetTop - 2) {
document.querySelectorAll('.paraDot ul li').forEach(el => {
el.classList.remove('active');
});
document.querySelector('.paraDot ul li:nth-child(' + (idx + 1) + ')').classList.add(
'active');
}
});
});