패랠랙스 스크로링 효과 - 닷 메뉴
Be true to thyself.
Attitude is everything.
It hurt because it mattered.
Sometimes the right path is not the easiest one.
Yesterday you said tomorrow. Just do it.
Happiness depends upon ourselves.
Faith makes all things possible.
Time you enjoy wasting is not wasted time.
Don’t dream it, be it.
<main>
<div class="paraScroll">scrollTop() : <span>0</span></div>
<!-- //paraScroll -->
<nav class="paraDot">
<ul>
<li class="active"><a href="#section1"><span>section1</span></a></li>
<li><a href="#section2"><span>section2</span></a></li>
<li><a href="#section3"><span>section3</span></a></li>
<li><a href="#section4"><span>section4</span></a></li>
<li><a href="#section5"><span>section5</span></a></li>
<li><a href="#section6"><span>section6</span></a></li>
<li><a href="#section7"><span>section7</span></a></li>
<li><a href="#section8"><span>section8</span></a></li>
<li><a href="#section9"><span>section9</span></a></li>
</ul>
</nav>
<!-- //paraDot -->
<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">Be true to thyself.</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">Attitude is everything.</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">It hurt because it mattered.</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">Sometimes the right path is not the easiest one.</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">Yesterday you said tomorrow. Just do it.</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">Happiness depends upon ourselves.</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">Faith makes all things possible.</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">Time you enjoy wasting is not wasted time.</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">Don’t dream it, be it.</p>
</section>
<!-- //section9 -->
</div>
<!-- //paraCont -->
</main>
.parallax {
background: #222;
color: #fff;
font-family: 'NEXONLv1Gothic';
}
.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: 0px 20px 2px;
}
.paraInfo2 {
position: fixed;
left: 20px;
bottom: 70px;
z-index: 1000;
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 20px;
font-size: 12px;
line-height: 1.8;
border-radius: 10px;
}
.paraInfo2 li {
list-style: none;
}
.paraDot {
position: fixed;
right: 20px;
top: 50%;
z-index: 1000;
transform: translateY(-50%);
background: rgba(0,0,0,0.4);
padding: 20px 10px;
border-radius: 30px;
}
.paraDot li {
list-style: none;
}
.paraDot li a {
width: 20px;
height: 20px;
display: block;
border: 2px solid #fff;
border-radius: 50%;
margin: 8px;
position: relative;
text-decoration: none;
}
.paraDot li a span {
position: absolute;
left: -105px;
top: 50%;
transform: translateY(-50%);
background: #fff;
color: #000;
display: block;
padding: 2px 15px;
border-radius: 30px;
opacity: 0;
}
.paraDot li.active a {
background: #fff;
}
.paraDot li.active a span {
opacity: 1;
}
.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: 700;
}
.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;
-webkit-filter: saturate(0%);
filter: saturate(0%);
-webkit-transition: all 1s;
transition: all 1s;
}
.paraCont .content-item .img-Wrap .img:hover {
-webkit-filter: saturate(100%);
filter: saturate(100%);
}
.paraCont .content-item .img-Wrap .img-jq {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-filter: saturate(0%);
filter: saturate(0%);
-webkit-transition: all 1s;
transition: all 1s;
}
.paraCont .content-item .img-Wrap .img-jq:hover {
-webkit-filter: saturate(100%);
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;
color: #F0F600;
}
.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-image: url(../img/bg1.jpg);
}
.content-item:nth-child(2) .img {
background-image: url(../img/bg2.jpg);
}
.content-item:nth-child(3) .img {
background-image: url(../img/bg3.jpg);
}
.content-item:nth-child(4) .img {
background-image: url(../img/bg4.jpg);
}
.content-item:nth-child(5) .img {
background-image: url(../img/bg5.jpg);
}
.content-item:nth-child(6) .img {
background-image: url(../img/bg6.jpg);
}
.content-item:nth-child(7) .img {
background-image: url(../img/bg7.jpg);
}
.content-item:nth-child(8) .img {
background-image: url(../img/bg8.jpg);
}
.content-item:nth-child(9) .img {
background-image: url(../img/bg9.jpg);
}
.content-item:nth-child(1) .img-jq {
background-image: url(../img/bg11.jpg);
}
.content-item:nth-child(2) .img-jq {
background-image: url(../img/bg12.jpg);
}
.content-item:nth-child(3) .img-jq {
background-image: url(../img/bg13.jpg);
}
.content-item:nth-child(4) .img-jq {
background-image: url(../img/bg14.jpg);
}
.content-item:nth-child(5) .img-jq {
background-image: url(../img/bg15.jpg);
}
.content-item:nth-child(6) .img-jq {
background-image: url(../img/bg16.jpg);
}
.content-item:nth-child(7) .img-jq {
background-image: url(../img/bg17.jpg);
}
.content-item:nth-child(8) .img-jq {
background-image: url(../img/bg18.jpg);
}
.content-item:nth-child(9) .img-jq {
background-image: url(../img/bg19.jpg);
}
document.querySelectorAll(".paraDot ul li a").forEach(element => {
element.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(element.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";
// if(scrollTop > document.getElementById("section1").offsetTop -2){
// document.querySelectorAll(".paraDot ul li").forEach(element => {
// element.classList.remove("active");
// });
// document.querySelector(".paraDot ul li:nth-child(1)").classList.add("active");
// };
// if(scrollTop > document.getElementById("section2").offsetTop -2){
// document.querySelectorAll(".paraDot ul li").forEach(element => {
// element.classList.remove("active");
// });
// document.querySelector(".paraDot ul li:nth-child(2)").classList.add("active");
// };
// if(scrollTop > document.getElementById("section3").offsetTop -2){
// document.querySelectorAll(".paraDot ul li").forEach(element => {
// element.classList.remove("active");
// });
// document.querySelector(".paraDot ul li:nth-child(3)").classList.add("active");
// };
for(let j=1; j<10; j++){
if(scrollTop > document.getElementById("section"+j).offsetTop-2){
document.querySelectorAll(".paraDot ul li").forEach(element => {
element.classList.remove("active");
});
document.querySelector(`.paraDot ul li:nth-child(${j})`).classList.add("active");
};
}
});