프로그래머스

팰럴랙스 이펙트 7번 8번

ture403 2023. 5. 31. 13:33

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

완성된 화면 입니다.

 

HTML 화면입니다.

<header id="header">
    <h1>Javascript Parallax Effect08</h1>
    <p>패럴렉스 이펙트 : 가로 효과</p>
    <ul>
        <li><a href="parallax01.html">1</a></li>
        <li><a href="parallax02.html">2</a></li>
        <li><a href="parallax03.html">3</a></li>
        <li><a href="parallax04.html">4</a></li>
        <li><a href="parallax05.html">5</a></li>
        <li><a href="parallax06.html">6</a></li>
        <li><a href="parallax07.html">7</a></li>
        <li class="active"><a href="parallax08.html">8</a></li>
    </ul>
</header>
<!-- header -->
<main id="main">
    <div class="parallaxs__wrap">
        <section id="section1" class="parallaxs__item">
            <span class="parallaxs_item_num">01</span>

        </section>
        <!-- //section1 -->
        <section id="section2" class="parallaxs__item">
            <span class="parallaxs_item_num">02</span>

        </section>
        <!-- //section2 -->
        <section id="section3" class="parallaxs__item">
            <span class="parallaxs_item_num">03</span>

        </section>
        <!-- //section3 -->
        <section id="section4" class="parallaxs__item">
            <span class="parallaxs_item_num">04</span>
        </section>
        <!-- //section4 -->
        <section id="section5" class="parallaxs__item">
            <span class="parallaxs_item_num">05</span>
        </section>
        <!-- //section5 -->
        <section id="section6" class="parallaxs__item">
            <span class="parallaxs_item_num">06</span>
        </section>
        <!-- //section6 -->
        <section id="section7" class="parallaxs__item">
            <span class="parallaxs_item_num">07</span>
        </section>
        <!-- //section7 -->
        <section id="section8" class="parallaxs__item">
            <span class="parallaxs_item_num">08</span>
        </section>
        <!-- //section8 -->
        <section id="section9" class="parallaxs__item">
            <span class="parallaxs_item_num">09</span>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- main -->
<aside class="parallax_info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- Parallax__info -->
<footer id="footer">
    <a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>

css 코드입니다.

#header {
    position: fixed;
    z-index: 10000;
}
.parallaxs__wrap {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
}
.parallaxs__item {
    width: 100vw;
    height: 100vh;
    position: relative;
}
#section1 {background-color: #111;}
#section2 {background-color: #222;}
#section3 {background-color: #333;}
#section4 {background-color: #444;}
#section5 {background-color: #555;}
#section6 {background-color: #666;}
#section7 {background-color: #777;}
#section8 {background-color: #888;}
#section9 {background-color: #999;}
.parallaxs_item_num {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    font-size: 10vw;
    z-index: 1000;
}

 

JS코드입니다.

const parallaxCont = document.querySelector(".parallaxs__wrap");
function scroll(){
    let scrollTop = window.pageYOffset;
    let parallaxWidth = parallaxCont.offsetWidth;
    document.body.style.height = parallaxWidth+'px';
    let viewWidth = parallaxWidth - window.innerWidth;
    let viewheight = parallaxWidth - window.innerHeight;
    let goLeft = scrollTop * (viewWidth / viewheight);


    gsap.to(parallaxCont, {left: -goLeft});
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);
    requestAnimationFrame(scroll);
}
scroll();

 

자바스크립트  gasp

이 코드는 패럴랙스 효과를 구현하는데 사용됩니다. scroll() 함수는 스크롤 이벤트를 처리하고, gsap 라이브러리를 사용하여 패럴랙스 효과를 적용합니다. 패럴랙스 효과는 스크롤 위치에 따라 parallaxCont 요소의 왼쪽 위치를 조정하여 구현되며, 스크롤 위치를 표시하는 부분도 업데이트됩니다.

이렇게 코드가 작성되어 있습니다. 이 예시 코드는 패럴랙스 효과를 가로로 움직이는 형태로 구현되어 있습니다.

 

 

패럴랙스 09번 입니다.

 

완성된 화면 입니다.

 

HTML 화면입니다.

<header id="header">
    <h1>Javascript Parallax Effect09</h1>
    <p>패럴렉스 이펙트 : 가로/세로 효과</p>
    <ul>
        <li><a href="parallax01.html">1</a></li>
        <li><a href="parallax02.html">2</a></li>
        <li><a href="parallax03.html">3</a></li>
        <li><a href="parallax04.html">4</a></li>
        <li><a href="parallax05.html">5</a></li>
        <li><a href="parallax06.html">6</a></li>
        <li><a href="parallax07.html">7</a></li>
        <li><a href="parallax08.html">8</a></li>
        <li class="active"><a href="parallax09.html">9</a></li>
    </ul>
</header>
<!-- header -->
<main id="main">
    <div class="parallaxs__wrap">
        <section id="section1" class="parallaxs__item">
            <span class="parallaxs_item_num">01</span>

        </section>
        <!-- //section1 -->
        <section id="section2" class="parallaxs__item">
            <span class="parallaxs_item_num">02</span>

        </section>
        <!-- //section2 -->
        <section id="section3" class="parallaxs__item">
            <span class="parallaxs_item_num">03</span>

        </section>
        <!-- //section3 -->
        <section id="section4" class="parallaxs__item">
            <div class="sec4">
                <article><span class="parallaxs_item_num">04-1</span></article>
                <article><span class="parallaxs_item_num">04-2</span></article>
                <article><span class="parallaxs_item_num">04-3</span></article>
            </div>
        </section>
        <!-- //section4 -->
        <section id="section5" class="parallaxs__item">
            <span class="parallaxs_item_num">05</span>
        </section>
        <!-- //section5 -->
        <section id="section6" class="parallaxs__item">
            <span class="parallaxs_item_num">06</span>
        </section>
        <!-- //section6 -->
        <section id="section7" class="parallaxs__item">
            <span class="parallaxs_item_num">07</span>
        </section>
        <!-- //section7 -->
        <section id="section8" class="parallaxs__item">
            <span class="parallaxs_item_num">08</span>
        </section>
        <!-- //section8 -->
        <section id="section9" class="parallaxs__item">
            <span class="parallaxs_item_num">09</span>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- main -->
<aside class="parallax_info">
    <div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- Parallax__info -->
<footer id="footer">
    <a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>

css 코드입니다.

#header {
    position: fixed;
    z-index: 10000;
}

.parallaxs__item {
    width: 100vw;
    height: 100vh;
    position: relative;
}
#section1 {background-color: #111; z-index: 7000;}
#section2 {background-color: #222; z-index: 6000;}
#section3 {background-color: #333; z-index: 5000;}
#section4 {
    background-color: #444;
    height: 400vh;
    z-index: 4000;
}
#section4 .sec4 {
    position: fixed;
    left: 0;
    top: 0;
    width: 400vh;
    height: 100%;
    display: flex;
}
#section4 .sec4 article {
    width: 200vh;
    height: 100vh;
    position: relative;
}
#section4 .sec4 article:nth-child(1) {background-color: rgb(255, 95, 95);}
#section4 .sec4 article:nth-child(2) {background-color: rgb(255, 195, 95);}
#section4 .sec4 article:nth-child(3) {background-color: rgb(155, 195, 95);}
#section5 {background-color: #555; z-index: 5000;}
#section6 {background-color: #666; z-index: 6000;}
#section7 {background-color: #777; z-index: 7000;}
#section8 {background-color: #888; z-index: 8000;}
#section9 {background-color: #999; z-index: 9000;}
.parallaxs_item_num {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    font-size: 10vw;
    z-index: 1000;
}
.parallax_info {
    position: fixed;
    z-index: 10000;
}

 

JS코드입니다.

const section4 = document.querySelector("#section4").offsetTop;
function scroll(){
    let scrollTop = window.pageYOffset;
    let goLeft = scrollTop - document.querySelector("#section4").offsetTop;
    if(scrollTop >= section4){
        gsap.to(".sec4", {left: -goLeft, ease: "linear"})
    }
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);
    requestAnimationFrame(scroll);
}
scroll();

 

자바스크립트  gasp

scroll() 함수는 스크롤 이벤트를 처리하고, gsap 라이브러리를 사용하여 패럴렉스 효과를 적용합니다.
section4 변수는 #section4 요소의 offsetTop 값을 저장합니다.
scroll() 함수는 페이지를 스크롤할 때마다 실행되며, 현재 스크롤 위치를 확인하고 #section4 요소에 대한 패럴렉스 효과를 적용합니다.
requestAnimationFrame()을 사용하여 스크롤 이벤트를 지속적으로 감지합니다.

'프로그래머스'의 다른글

  • 현재글팰럴랙스 이펙트 7번 8번

관련글

댓글

티스토리툴바