패럴랙스 이펙트

section1

지혜는 듣는 데서 오고 후회는 말하는 데서 온다.

section2

탐욕은 일체를 얻고자 욕심내어서 도리어 모든 것을 잃어버린다.

section3

힘으로 사람을 복종시키려 말고 덕으로써 사람을 복종시켜라.

section4

타인에 대한 존경은 처세법의 제일 조건이다.

section5

오늘 할 수 있는 일에 전력을 다하라, 그러면 내일에는 한 걸음 더 진보한다.

section6

기다림만으로 사는 사람은 굶어서 죽는다.

section7

끝을 맺기를 처음과 같이 하면 실패가 없다.

section8

열의 없이 성취 된 위업이란 아직 하나도 없다.

section9

절제는 모든 진주 고리를 이어주는 비단의 실이다.

source view

Javascript

HTML

CSS

document.querySelectorAll("#parallax__dot a").forEach((el) => { // #parallax__dot a의 element를 선택
    el.addEventListener("click", (e) => { // element에 클릭 이벤트 실행
        e.preventDefault(); // 클릭 시 이동을 중지 합니다.

        document.querySelector(el.getAttribute("href")).scrollIntoView({ behavior: "smooth" }); // 선택한 href 로 스크롤 부드럽게 이동
    });
});

window.addEventListener("scroll", () => { // 윈도우 스크롤 이벤트 실행
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

    // #parallax__info span에 scrollTop 값 대입
    document.querySelector("#parallax__info span").innerText = Math.floor(scrollTop);

    document.querySelectorAll(".content__item").forEach((e, i) => {
        if (scrollTop >= e.offsetTop - window.innerHeight / 2) {
            /*정확히 안맞을수도 있어서 오차가 있을수 있으므로 빼줍니다.*/
            document.querySelectorAll("#parallax__dot li").forEach((li) => {
                li.classList.remove("active");
            });
            // i 값은 index 이므로 0부터 시작하여 +1 을 더해 1부터 시작하게 해줍니다.
            document.querySelector("#parallax__dot li:nth-child(" + (i + 1) + ")").classList.add("active");
        }
    });
});

// window.scroll(0, 1000);                 1000에 간다 (고정)
// window.scroll({left: 0, top: 2000});    2000에 간다 (고정)
// window.scroll({left: 0, top: 2000, behavior: "smooth"});  2000에 간다(스무스하게) 고정

// window.scrollTo(0, 1000);                 1000에 간다 (고정)
// window.scrollTo({left: 0, top: 2000});    2000에 간다 (고정)
// window.scrollTo({left: 0, top: 2000, behavior: "smooth"});  2000에 간다(스무스하게) 고정

// window.scrollBy(0, 1000);                 1000에 간다 (고정)
// window.scrollBy({left: 0, top: 2000});    2000에 간다 (고정)
// window.scrollBy({left: 0, top: 2000, behavior: "smooth"});  2000에 간다(스무스하게) 고정

<!-- header start -->
<header id="header">
    <!-- title -->
    <h1>Javascript Parallax Effect02</h1>

    <!-- sub title -->
    <p>패럴랙스 이펙트 - 사이드 메뉴</p>

    <!-- html menu -->
    <ul>
        <li><a href="parallaxEffect01.html">1</a></li>
        <li class="active"><a href="parallaxEffect02.html">2</a></li>
        <li><a href="parallaxEffect03.html">3</a></li>
        <li><a href="parallaxEffect04.html">4</a></li>
        <li><a href="parallaxEffect05.html">5</a></li>
        <li><a href="parallaxEffect06.html">6</a></li>
        <li><a href="parallaxEffect07.html">7</a></li>
    </ul>
</header>
<!-- header end -->

<!-- nav start -->
<nav id="parallax__dot">
    <!-- menu -->
    <ul>
        <li class="active">
            <a href="#section1"><span>메뉴1</span></a>
        </li>
        <li>
            <a href="#section2"><span>메뉴2</span></a>
        </li>
        <li>
            <a href="#section3"><span>메뉴3</span></a>
        </li>
        <li>
            <a href="#section4"><span>메뉴4</span></a>
        </li>
        <li>
            <a href="#section5"><span>메뉴5</span></a>
        </li>
        <li>
            <a href="#section6"><span>메뉴6</span></a>
        </li>
        <li>
            <a href="#section7"><span>메뉴7</span></a>
        </li>
        <li>
            <a href="#section8"><span>메뉴8</span></a>
        </li>
        <li>
            <a href="#section9"><span>메뉴9</span></a>
        </li>
    </ul>
</nav>
<!-- nav end -->

<!-- main start -->
<main id="parallax__cont">
    <div id="contents">
        <!-- section1 start -->
        <section id="section1" class="content__item">
            <!-- section number -->
            <span class="content__item__num">01</span>
            <!-- section title -->
            <h2 class="content__item__title">section1</h2>
            <figure class="content__item__imgWrap">
                <!-- section  image -->
                <div class="content__item__img"></div>
            </figure>
            <!-- section desc -->
            <p class="content__item__desc">지혜는 듣는 데서 오고 후회는 말하는 데서 온다.</p>
        </section>
        <!-- section1 -->

        <section id="section2" class="content__item">
            <span class="content__item__num">02</span>
            <h2 class="content__item__title">section2</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">탐욕은 일체를 얻고자 욕심내어서 도리어 모든 것을 잃어버린다.</p>
        </section>
        <!-- section2 -->

        <section id="section3" class="content__item">
            <span class="content__item__num">03</span>
            <h2 class="content__item__title">section3</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">힘으로 사람을 복종시키려 말고 덕으로써 사람을 복종시켜라.</p>
        </section>
        <!-- section3 -->

        <section id="section4" class="content__item">
            <span class="content__item__num">04</span>
            <h2 class="content__item__title">section4</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">타인에 대한 존경은 처세법의 제일 조건이다.</p>
        </section>
        <!-- //section4 -->

        <section id="section5" class="content__item">
            <span class="content__item__num">05</span>
            <h2 class="content__item__title">section5</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">오늘 할 수 있는 일에 전력을 다하라, 그러면 내일에는 한 걸음 더 진보한다.</p>
        </section>
        <!-- //section5 -->

        <section id="section6" class="content__item">
            <span class="content__item__num">06</span>
            <h2 class="content__item__title">section6</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">기다림만으로 사는 사람은 굶어서 죽는다.</p>
        </section>
        <!-- //section6 -->

        <section id="section7" class="content__item">
            <span class="content__item__num">07</span>
            <h2 class="content__item__title">section7</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">끝을 맺기를 처음과 같이 하면 실패가 없다.</p>
        </section>
        <!-- //section7 -->

        <section id="section8" class="content__item">
            <span class="content__item__num">08</span>
            <h2 class="content__item__title">section8</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">열의 없이 성취 된 위업이란 아직 하나도 없다.</p>
        </section>
        <!-- //section8 -->

        <section id="section9" class="content__item">
            <span class="content__item__num">09</span>
            <h2 class="content__item__title">section9</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">절제는 모든 진주 고리를 이어주는 비단의 실이다.</p>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- //main -->

<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span>px</div> <!-- 스크롤 값 정보 -->
</aside>

/* parallax__nav */
#parallax__nav {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    border-radius: 50px;
}
#parallax__nav li {
    display: inline;
    margin: 0 5px;
}
#parallax__nav li a {
    display: inline-block;
    height: 30px;
    padding: 5px 20px;
    text-align: center;
    line-height: 30px;
}
#parallax__nav li.active a {
    background: #fff;
    color: #000;
    border-radius: 20px;
    box-sizing: content-box;
}
#parallax__cont {
    max-width: 1600px;
    width: 98%;
    margin: 0 auto;
    /* background-color: rgba(255, 255, 255, 0.1); */
}
.content__item {
    width: 1000px;
    max-width: 70vw;
    margin: 30vw auto;
    /* background-color: rgba(255, 255, 255, 0.3); */
    text-align: left;
    margin-right: 0;
    position: relative;
    padding-top: 8vw;
}
.content__item:nth-child(even) {
    margin-left: 0;
    text-align: right;
}
.content__item__num {
    font-size: 35vw;
    font-weight: 100;
    font-family: "Lato";
    position: absolute;
    left: -5vw;
    top: -13vw;
    opacity: 0.07;
    z-index: -2;
}
.content__item:nth-child(even) .content__item__num {
    left: auto;
    right: -5vw;
}
.content__item__title {
    font-weight: 400;
    text-transform: capitalize;
}
.content__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    position: relative;
    overflow: hidden;
    z-index: -1;
}
.content__item__img {
    position: absolute;
    background: url('../assets/img/pallacx_bg08.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 110%;
    height: 110%;
    left: -5%;
    top: -5%;
    filter: saturate(0%);
    transition: all 1s;
}

/* section image */
.content__item:nth-child(1) .content__item__img {
    background-image: url("../assets/img/pallacx_bg01.jpg");
}
.content__item:nth-child(2) .content__item__img {
    background-image: url("../assets/img/pallacx_bg02.jpg");
}
.content__item:nth-child(3) .content__item__img {
    background-image: url("../assets/img/pallacx_bg03.jpg");
}
.content__item:nth-child(4) .content__item__img {
    background-image: url("../assets/img/pallacx_bg04.jpg");
}
.content__item:nth-child(5) .content__item__img {
    background-image: url("../assets/img/pallacx_bg05.jpg");
}
.content__item:nth-child(6) .content__item__img {
    background-image: url("../assets/img/pallacx_bg06.jpg");
}
.content__item:nth-child(7) .content__item__img {
    background-image: url("../assets/img/pallacx_bg07.jpg");
}
.content__item:nth-child(8) .content__item__img {
    background-image: url("../assets/img/pallacx_bg08.jpg");
}
.content__item:nth-child(9) .content__item__img {
    background-image: url("../assets/img/pallacx_bg09.jpg");
}

.content__item__desc {
    font-size: 4vw;
    line-height: 1.4;
    margin-top: -4vw;
    margin-left: -4vw;
    word-break: keep-all;
}
.content__item:nth-child(even) .content__item__desc {
    margin-left: auto;
    margin-right: -4vw;
}
#parallax__info {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}
#parallax__info li,
.scroll {
    line-height: 1.4;
}
@media (max-width: 800px) {
    #parallax__cont {
        margin-top: 70vw;
    }
    #parallax__nav {
        padding: 10px;
        right: auto;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.8);
    }
    #parallax__nav li {
        display: block;
        margin: 5px;
    }
    #parallax__nav li a {
        font-size: 14px;
        padding: 5px;
        border-radius: 5px;
        height: auto;
        line-height: 1;
    }
    #parallax__nav li.active a {
        border-radius: 5px;
    }
    #parallax__info {
        left: 10px;
        bottom: 10px;
    }
}
#parallax__dot {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    padding: 20px 10px;
    border-radius: 30px;
}
#parallax__dot li {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 12px 8px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
    transition: box-shadow 0.2s ease;
}
#parallax__dot li a {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
#parallax__dot li span {
    display: none;
}
#parallax__dot li.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
}
#parallax__dot li.active a {
    transform: scale(0.4);
}