페럴랙스 이펙트 03

Top

section1

결과도 중요하지만, 과정을 더 중요하게 생각한다.

section2

피할수 없으면 즐겨라.

section3

1퍼센트의 가능성, 그것이 나의 길이다.

section4

꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.

section5

눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다.

section6

폼은 일시적이지만, 클래스는 영원하다.

section7

고개 숙이지 마십시오. 세상을 똑바로 정면으로 바라보십시오.

section8

자신을 내보여라. 그러면 재능이 드러날 것이다.

section9

인생에 뜻을 세우는데 있어 늦은 때라곤 없다.

소스 보기

Javascript

HTML

CSS

document.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    document.querySelector("#parallex__info span").innerText = scrollTop;

    const section9 = document.querySelector("#section9");
    const section9Y = section9.offsetTop;
    console.log(section9Y);



    //01
    if(scrollTop > 0){
        document.querySelector("#parallax__nav").classList.add("show");
    } else {
        document.querySelector("#parallax__nav").classList.remove("show");
    }

    document.querySelector("#parallex__info span").innerText = Math.floor(scrollTop);

    //02
    if(scrollTop > section9Y){
        document.querySelector("#parallax__top").classList.add("show");
    } else {
        document.querySelector("#parallax__top").classList.remove("show");
    };

    document.querySelectorAll("#parallax__nav li a").forEach(li => {
        li.addEventListener("click", (e) => {
            e.preventDefault();
            document.querySelector(li.getAttribute("href")).scrollIntoView({
                behavior: "smooth"  //부드럽게 움직이도록 해줌
            });
        });
    });

    //top 버튼
    document.querySelector("#parallax__top").addEventListener("click", () => {
        window.scroll({left: 0, top: 0, behavior: "smooth"});
    });
});

// });

//03 마우스 스크롤을 내릴 때 메뉴가 사라지고 스크롤을 올리면 메뉴가 올라가는 방식
// let nowScroll = true;
// let lastScroll = 0;

// function scrollProgress(){
//     nowScroll = true;

//     setInterval(() => {
//         if(nowScroll){
//             nowScroll = false;
//             hasScroll();
//         }
//     }, 300);
// }

// function hasScroll(){
//     let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

//     if(scrollTop < lastScroll){
//         document.querySelector("#parallax__nav").classList.add("show");
//     } else {
//         document.querySelector("#parallax__nav").classList.remove("show");
//     }
//     lastScroll = scrollTop;
// };

// window.addEventListener("scroll", scrollProgress);

//

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

<div id="parallax__top">
    Top
</div>
<!-- parallax__top -->

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" class="content__item">
            <span class="content__item__num">01</span>
            <h2 class="content__item__title">section1</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <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">1퍼센트의 가능성, 그것이 나의 길이다.</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>></a>
        </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="parallex__info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- parallex__info -->

#parallax__nav {
    position: fixed;
    right: 20px;
    top: -200px;
    z-index: 2000;
    background-color: rgba(0,0,0,0.4);
    padding: 20px 30px;
    border-radius: 50px;
    transition: top .4s ease;
}
#parallax__nav.show {
    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: 1500px;
    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.1); */
    text-align: left;
    margin-right: 0;
    position: relative;
    padding-top: 15vw;
}
.content__item:nth-child(2n) {  /*짝수만 선택하는 방법 even이라 적어도 된다.*/
    margin-left: 0;
    text-align: right;
}

.content__item__num {
    font-size: 35vw;
    font-family: "Lato";
    font-weight: 100;
    position: absolute;
    left: -5vw;
    top: -7vw;
    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-image: url(../assets/img/effect_bg05-min.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;
}
.content__item:nth-child(1) .content__item__img {
    background-image: url(../assets/img/effect_bg01-min.jpg);
}
.content__item:nth-child(2) .content__item__img {
    background-image: url(../assets/img/effect_bg02-min.jpg);
}
.content__item:nth-child(3) .content__item__img {
    background-image: url(../assets/img/effect_bg03-min.jpg);
}
.content__item:nth-child(4) .content__item__img {
    background-image: url(../assets/img/effect_bg04-min.jpg);
}
.content__item:nth-child(5) .content__item__img {
    background-image: url(../assets/img/effect_bg05-min.jpg);
}
.content__item:nth-child(6) .content__item__img {
    background-image: url(../assets/img/effect_bg06-min.jpg);
}
.content__item:nth-child(7) .content__item__img {
    background-image: url(../assets/img/effect_bg07-min.jpg);
}
.content__item:nth-child(8) .content__item__img {
    background-image: url(../assets/img/effect_bg08-min.jpg);
}
.content__item:nth-child(9) .content__item__img {
    background-image: url(../assets/img/effect_bg09-min.jpg);
}

.content__item__desc {
    font-size: 4vw;
    line-height: 1.4;
    margin-top: -5vw;
    margin-left: -4vw;
    word-break: keep-all;
}
.content__item:nth-child(even) .content__item__desc {
    margin-left: auto;
    margin-right: -4vw;
}
#parallex__info {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}
#parallex__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;
    }
    #parallex__info {
        left: 10px;
        bottom: 10px;
    }
}

#parallax__top {
    position: fixed;;
    left: 50%;
    bottom: -220px;
    z-index: 10000;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.4);
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
}
#parallax__top.show {
    bottom: 20px;
}
#parallax__top:hover {
    background: #fff;
    color: #000;
}