패럴랙스 이펙트06

section1

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

section2

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

section3

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

section4

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

section5

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

section6

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

section7

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

section8

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

section9

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

소스 보기

Javascript

HTML

CSS

// 글씨 나누기
// let text = document.querySelector("#section1 .content__item__desc");
// let splitText = text.innerText;
// let splitWrap = splitText.split('').join('</span><span>');
// text.innerHTML = splitWrap = "<span>" + splitWrap + "</span>";

//글씨 쪼개기(다중이)
// text.forEach((e, i) => {
//     let splitText = e.innerText;
//     let splitWrap = splitText.split('').join('</span><span>');
//     e.innerHTML = splitWrap = "<span>" + splitWrap + "</span>";
//     console.log(splitWrap);
// });

document.querySelectorAll(".split").forEach(text => {
    let splitText = text.innerText;
    let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>");   //시각리더기가 한 글자씩 끊어서 읽는 문제 발생. 접근성 저하
    splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
    text.innerHTML = splitWrap;
    text.setAttribute("aria-label", splitText); //접근성을 위해 setAttribute사용. setAttribute : 선택한 요소(element)의 속성(attribute) 값을 부여
});

function scroll() {
    let scrollTop = window.scrollY // == window.pageYOffset;
    document.querySelector("#parallax__info .scroll").innerText = Math.round(scrollTop);

    // CSS 클래스 추가(노가다)
    // document.querySelectorAll(".content__item").forEach(item => {       //선택자에 split을 넣으면 한 번에 나오는 오류가 생겨서 부모박스 선택
    //     if (scrollTop >= item.offsetTop) {
    //         item.querySelector(".split").classList.add("show");
    //     }
    // })

    document.querySelectorAll(".content__item").forEach(item => {
        if (scrollTop >= item.offsetTop) {
            item.querySelector(".split").classList.add("show")  //split에 show class 추가
            item.querySelectorAll(".split span").forEach((span, index) => {
                span.style.transitionDelay = `${index * 50}ms`;     //index 이용하여 transition-delay효과 추가
                // console.log(span[index])
            });
        }
    });

    requestAnimationFrame(scroll);

}
scroll();

<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>
<!-- main -->

<aside id="parallax__info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- parallax__info -->

/* parallaxType  */
#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;
    transition: top .4s ease;
}

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

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

/* option */
.split span {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0, 0.71, 0.11, 1.66);
    display: inline-block;
    /* 띄어쓰기 */
    min-width: 1vw;
}

.split.show span {
    opacity: 1;
    transform: translateY(0);
}