패럴랙스 이펙트03

Top

section1

언제나 현재에 집중할수 있다면 행복할것이다.

section2

진정으로 웃으려면 고통을 참아야하며, 고통을 즐길 줄 알아야 한다.

section3

한번의 실패와 영원한 실패를 혼동하지 마라.

section4

계단을 밟아야 계단 위에 올라설수 있다.

section5

행복은 습관이다,그것을 몸에 지니라.

section6

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

section7

그대의 하루 하루를 그대의 마지막 날이라고 생각하라.

section8

작은 기회로 부터 종종 위대한 업적이 시작된다.

section9

최고에 도달하려면 최저에서 시작하라.

소스 보기

Javascript

HTML

CSS

window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;      //세로 스크롤 값 구하는 3가지 방법(브라우저마다 지원 여부 다름)

    if (scrollTop >= document.body.scrollHeight - (window.innerHeight - 10)) {     // scrollTop > ( 문서 전체높이 - 브라우저 높이 )
        document.querySelector("#parallax__top").classList.add("show");         //최하단으로 갔을 때 top버튼 보이게
    } else {
        document.querySelector("#parallax__top").classList.remove("show");      //최하단이 아닐 때 top버튼 숨기기
    }

    document.querySelector("#parallax__top").addEventListener("click", () => {  //top버튼 클릭했을 때
        window.scrollTo({ left: 0, top: 0, behavior: "smooth" });               //최상단으로 부드럽게 이동시킴
    });

    document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop);
});

// 트리거 변수 이용
let nowScroll = true;   // true일때 실행. false일 경우 실행x
let lastScroll = 0;

function scrollProgress() {
    nowScroll = true;

    setInterval(() => {     //시간차를 위해 setInterval 사용. 
        if (nowScroll) {
            nowScroll = false;
            hasScroll();
        }
    }, 300) // 0.3초마다
}

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

    if (scrollTop < lastScroll) {   // scrollTop값이 lastScroll보다 작으면
        document.querySelector("#parallax__nav").classList.add("show");   //내비게이션 메뉴 보여주기
    } else {
        document.querySelector("#parallax__nav").classList.remove("show");    // 아니면 숨기기
    }
    lastScroll = scrollTop;     // scrollTop값을 lastScroll에 저장하여 반복
}

window.addEventListener("scroll", scrollProgress);

const scroll = document.querySelector("#parallax__info .scroll span")
window.addEventListener("scroll", () => {
    let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
    //forEach()
    document.querySelectorAll(".content__item").forEach((element, index) => {
        if (scrollTop >= element.offsetTop - 600) {
            document.querySelectorAll("#parallax__nav li").forEach(li => {
                li.classList.remove("active")
            });
            document.querySelector("#parallax__nav li:nth-child(" + (index + 1) + ")").classList.add("active");
        }
    });

    //info
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);

    for (let i = 1; i < 10; i++) {
        document.querySelector(".offset" + i).innerText = document.getElementById("section" + i).offsetTop;
    }

});

//스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"
        });
    });
});

<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>
<div id="parallax__top">
    Top
</div>
<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">한번의 실패와 영원한 실패를 혼동하지 마라.</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">1퍼센트의 가능성, 그것이 나의 길이다.</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>
<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>

/* parallaxType  */
    #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 {
        top: 20px;
    }

    #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;
    }

    .content__item {
        width: 1000px;
        max-width: 70vw;
        margin: 30vw auto;
        text-align: left;
        margin-right: 0;
        position: relative;
        padding-top: 7vw;
    }

    .content__item:nth-child(2n) {
        /* even, 2n+1, 2n*8 등등 가능 */
        margin-left: 0;
        text-align: right;
    }

    .content__item__num {
        font-size: 35vw;
        font-family: "Lato";
        font-weight: 100;
        position: absolute;
        left: -5vw;
        top: -16vw;
        opacity: 0.07;
        z-index: -2;
    }

    .content__item:nth-child(2n) .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/effect_bg05@2x-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_bg11-min.jpg);
    }

    .content__item:nth-child(2) .content__item__img {
        background-image: url(../assets/img/effect_bg12-min.jpg);
    }

    .content__item:nth-child(3) .content__item__img {
        background-image: url(../assets/img/effect_bg13-min.jpg);
    }

    .content__item:nth-child(4) .content__item__img {
        background-image: url(../assets/img/effect_bg14-min.jpg);
    }

    .content__item:nth-child(5) .content__item__img {
        background-image: url(../assets/img/effect_bg15-min.jpg);
    }

    .content__item:nth-child(6) .content__item__img {
        background-image: url(../assets/img/effect_bg16-min.jpg);
    }

    .content__item:nth-child(7) .content__item__img {
        background-image: url(../assets/img/effect_bg17-min.jpg);
    }

    .content__item:nth-child(8) .content__item__img {
        background-image: url(../assets/img/effect_bg18-min.jpg);
    }

    .content__item:nth-child(9) .content__item__img {
        background-image: url(../assets/img/effect_bg19-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;
    }

    #parallax__info {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 2000;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 20px;
        border-radius: 10px;
    }

    #parallax__info li,
    .scrollTop {
        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__top {
        position: fixed;
        left: 50%;
        bottom: -120px;
        z-index: 2000;
        transform: translateX(50%);
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.4);
        text-align: center;
        line-height: 40px;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s;
    }

    #parallax__top.show {
        bottom: 20px;
    }

    #parallax__top:hover {
        background: #fff;
        color: #000;
    }