Animated Rainbow Nyan Cat
본문 바로가기
Effect/퍼럴랙스

퍼럴랙스 이펙트 01

by 이유나1 2022. 9. 6.
728x90
반응형

패럴랙스 01

원본 페이지 보기
원본 소스 보기

Java

스크롤바 컴퓨터마다 안되는게 있을수 있으니 3개를 적어줍니다.
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;

메뉴 이펙트 주기

// for문
for (let i = 1; i &lt= 9; i++) {
if (scrollTop >= document.getElementById("section"  +i).offsetTop) {
document.querySelectorAll("#parallax__nav li").forEach(li => {
    li.classList.remove("active")
});
document.querySelector("#parallax__nav li:nth-child("+i+")").classList.add("active")
}
}
// forEach문
document.querySelectorAll(".content__item").forEach((element, index) => {
    if (scrollTop >= element.offsetTop - 2) {
        document.querySelectorAll("#parallax__nav li").forEach(li => {
            li.classList.remove("active");
        });
        document.querySelector("#parallax__nav li:nth-child(" + (index + 1) + ")").classList.add("active")
    }
})

위치값 (section)

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

스크롤 이동

스크롤을 behavior: "smooth" 를 사용하여 부드럽게 이동하도록 합니다.
 document.querySelectorAll("#parallax__nav li a").forEach(li => {
    li.addEventListener("click", (e) => {
        e.preventDefault();
        document.querySelector(li.getAttribute("href")).scrollIntoView({
            behavior: "smooth"
        });
    });
});

CSS

코드 보기

 

/* .parallax__nav */
#parallax__nav {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 20000;
    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: 7vw;
}

/*  .content__item 의 짝수만 선택 even , 2n = +,* 가능 */
.content__item:nth-child(even) {
    margin-left: 0;
    text-align: right;
}

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

.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__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/img3/effect_bg01-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/img3/effect_bg01-min.jpg);
}

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

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

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

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

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

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

.content__item:nth-child(8) .content__item__img {
    background-image: url(../assets/img3/effect_bg08-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.4);
    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;
        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;
    }
}

HTML

코드 보기

 

&ltbody class="img01"&gt
&ltheader id="header"&gt
    &lth1&gtJavascript parallax Effect01&lt/h1&gt
    &ltp&gt패럴랙스 이펙트 - 메뉴 이동&lt/p&gt
    &ltul&gt
        &ltli class="active"&gt&lta href="parallaxEffect01.html"&gt1&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="parallaxEffect02.html"&gt2&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="parallaxEffect03.html"&gt3&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="parallaxEffect04.html"&gt4&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="parallaxEffect05.html"&gt5&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="parallaxEffect06.html"&gt6&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="parallaxEffect07.html"&gt7&lt/a&gt&lt/li&gt
    &lt/ul&gt
&lt/header&gt
&lt!-- //header --&gt

&ltnav id="parallax__nav"&gt
    &ltul&gt
        &ltli class="active"&gt&lta href="#section1"&gt메뉴1&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section2"&gt메뉴2&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section3"&gt메뉴3&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section4"&gt메뉴4&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section5"&gt메뉴5&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section6"&gt메뉴6&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section7"&gt메뉴7&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section8"&gt메뉴8&lt/a&gt&lt/li&gt
        &ltli&gt&lta href="#section9"&gt메뉴9&lt/a&gt&lt/li&gt
    &lt/ul&gt
&lt/nav&gt
&lt!-- parallax__nav --&gt

&ltmain id="parallax__cont"&gt
    &ltdiv id="contents"&gt
        &ltsection id="section1" class="content__item"&gt
            &ltspan class="content__item__num"&gt01&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다 .&lt/p&gt
        &lt/section&gt
        &lt!-- section --&gt


        &ltsection id="section2" class="content__item"&gt
            &ltspan class="content__item__num"&gt02&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt행복한 삶을 살기위해 필요한 것은 거의 없다.&lt/p&gt
        &lt/section&gt
        &lt!-- section2 --&gt


        &ltsection id="section3" class="content__item"&gt
            &ltspan class="content__item__num"&gt03&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt한번의 실패와 영원한 실패를 혼동하지 마라.&lt/p&gt
        &lt/section&gt
        &lt!-- section3 --&gt


        &ltsection id="section4" class="content__item"&gt
            &ltspan class="content__item__num"&gt04&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt1퍼센트의 가능성, 그것이 나의 길이다. &lt/p&gt
        &lt/section&gt
        &lt!-- section4 --&gt

        &ltsection id="section5" class="content__item"&gt
            &ltspan class="content__item__num"&gt05&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.&lt/p&gt
        &lt/section&gt
        &lt!-- section5 --&gt


        &ltsection id="section6" class="content__item"&gt
            &ltspan class="content__item__num"&gt06&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt오늘은 당신의 남은 인생 중, 첫 번째 날이다.&lt/p&gt
        &lt/section&gt
        &lt!-- section6 --&gt


        &ltsection id="section7" class="content__item"&gt
            &ltspan class="content__item__num"&gt07&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt나 자신에 대한 자신감을 잃으면 온 세상이 나의 적이 된다.&lt/p&gt
        &lt/section&gt
        &lt!-- section7 --&gt


        &ltsection id="section8" class="content__item"&gt
            &ltspan class="content__item__num"&gt08&lt/span&gt
            &lth2 class="content__item__title"&gtsection1&lt/h2&gt
            &ltfigure class="content__item__imgWrap"&gt
                &ltdiv class="content__item__img"&gt&lt/div&gt
            &lt/figure&gt
            &ltp class="content__item__desc"&gt고개 숙이지 마십시오. 세상을 똑바로 정면으로 바라보십시오.&lt/p&gt
        &lt/section&gt
        &lt!-- section8 --&gt
    &lt/div&gt

&lt/main&gt
&lt!-- //main --&gt

&ltaside id="parallax__info"&gt
    &ltdiv class="scroll"&gtscrollTop : &ltspan&gt0&lt/span&gtpx&lt/div&gt
    &ltdiv class="infoTop"&gt
        &ltul&gt
            &ltli&gt#section1 offset() : &ltspan class="offset1"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section2 offset() : &ltspan class="offset2"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section3 offset() : &ltspan class="offset3"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section4 offset() : &ltspan class="offset4"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section5 offset() : &ltspan class="offset5"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section6 offset() : &ltspan class="offset6"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section7 offset() : &ltspan class="offset7"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section8 offset() : &ltspan class="offset8"&gt0&lt/span&gtpx&lt/li&gt
            &ltli&gt#section9 offset() : &ltspan class="offset9"&gt0&lt/span&gtpx&lt/li&gt
        &lt/ul&gt
    &lt/div&gt
&lt/aside&gt
&lt!-- parallax__info --&gt
728x90

'Effect > 퍼럴랙스' 카테고리의 다른 글

패럴렉스 이펙트 06  (2) 2022.10.07
퍼럴랙스 이펙트 05  (2) 2022.09.20
퍼럴랙스 이펙트 04  (2) 2022.09.19
퍼럴랙스 이펙트 03  (3) 2022.09.12
퍼럴랙스 이펙트 02  (2) 2022.09.12

관련글

댓글

/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바