패럴렉스 효과_03 : TOP 버튼과 네비 메뉴를 스크롤에 따라 변화시켜보자!

패럴렉스 이펙트_03 구현하기

이번 예제는 하단과 같은 기능을 구현해보도록 하겠습니다
1. 이전 스크롤값과 현재 스크롤값을 비교 후 스크롤을 올렸을때 이전 스크롤값보다 작으니 메뉴가 나타나는 기능
2. scrollTop값과 브라우저 내부 높이값을 더한 값보다 스크롤되지 않은 브라우저 내부 높이 보다 작을때 "top" 버튼에 클래스 show를 붙여 top버튼이 브라우저 맨 하단까지 내렸을때 버튼이 보이는 기능

---

HTML 작성

Top버튼 구현을 위해 하단 부분을 이전 예제에 추가시킵니다.

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

---

CSS 작성

이번 예제 구현을 위한 살을 붙여줍니다!

/* parallax__nav */
    #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 0.4s ease;
    }

    #parallax__nav.show{
        top: 0;
    }

    #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;
        /* background-color: rgba(255, 255, 255, 0.1); */
        margin: 0 auto;
        width: 98%;
    }

    .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) {
        /* 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: -16vw;
        opacity: 0.07;
        z-index: -2;
    }

    .content__item:nth-child(even) .content__item__num {
        right: -5vw;
        left: auto;
        /* left 값 초기화 */
    }

    .content__item__title {
        font-weight: 400;
        text-transform: capitalize;
    }

    .content__item__imgWrap {
        width: 100%;
        padding-bottom: 56.25%;
        background-color: #000;
        position: relative;
        overflow: hidden;
        z-index: -1;
    }

    .content__item__img {
        background: url(../../assets/slider/effect_bg_01.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        /* 내가 작아서 넣음 */
        position: absolute;
        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/slider/effect_bg_01.jpg);
    }

    .content__item:nth-child(2) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_02.jpg);
    }

    .content__item:nth-child(3) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_03.jpg);
    }

    .content__item:nth-child(4) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_04.jpg);
    }

    .content__item:nth-child(5) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_05.jpg);
    }

    .content__item:nth-child(6) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_06.jpg);
    }

    .content__item:nth-child(7) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_07.jpg);
    }

    .content__item:nth-child(8) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_08.jpg);
    }

    .content__item:nth-child(9) .content__item__img {
        background-image: url(../../assets/slider/effect_bg_09.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: 10px;
            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;
        transform: translateX(-50%);
        z-index: 10000;
        left: 50%;
        bottom: -200px;
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,0.4);
        text-align: center;
        line-height: 40px;
        color: #fff;
        border-radius: 50%;
        padding: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }

    #parallax__top.show {
        bottom: 20px;
    }

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

---

JS : 브라우저의 맨 하단까지 스크롤을 하면 top 버튼 보여주기

1. scrollTop(현재 스크롤된 값)값을 이용홰 만약 이 값과 브라우저 창 내부의 높이가 문서 전체의 높이보다 크다면
2. #parallax__top에 "show" 클래스를 추가해 top 버튼 보여주고 아닐시 show 클래스를 제거

//02
    window.addEventListener("scroll", ()=>{
        let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
        if(scrollTop + window.innerHeight >= document.body.scrollHeight){
            document.querySelector("#parallax__top").classList.add("show")
        }else {
            document.querySelector("#parallax__top").classList.remove("show")
        }
    })

    document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop)
})
document.querySelector("#parallax__top").addEventListener("click", ()=>{
    window.scrollTo({left: 0, top: 0, behavior: "smooth"});
})

---

JS : 스크롤을 내릴때 메뉴를 숨기고 살짝 올리면 나오는 네비 메뉴 구현!

1. window.addEventListener("scroll",scrollProgress)에 의하여 스크롤 발생시 이벤트 발생
2. scrollProgress 함수에서 nowScroll을 처음 true로 서정해 setInterval 속 if 조건문을 무조건 실행시키고
3. 추후 재사용을 위해 nowScroll은 false로 변경 후 통해 hasScroll로 리턴해주는 변수를 만들어 작동시킵니다.
4. 이후 hasScroll의 scrollTop(현재 스크롤 값)값이 lastScroll(이전 스크롤 값)값보다 작다면
5. #parallax__nav(네비바)에 show 클래스를 추가시켜 보여주고 아닐 시 show 클래스르 제거
6. 위와같이 1~5번 과정을 거친 후 lastScroll(이전 스크롤 값)에는 scrollTop(현재 스크롤 값) 값을 넣습니다

//03
    let nowScroll = true;  //실행 : 트리거 변수라고 부름
    let lastScroll = 0;

    function scrollProgress(){
        nowScroll = true; 

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

    function hasScroll(){       // 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);

---

완성예제

이번것은 뭔가 복잡해보였는데 막상 한줄씩 읽어보면 또 별거 없는거 같은데 막상 시험보면 남고있는 자신의 모습이 상상가네요 그쵸 ^_____^?

---

원본 소스 보기

원본 페이지 보기