이미지가 부드럽게 움직이는 패럴랙스 이펙트 01

JAVASCRIPT/페럴랙스 이펙트

이미지가 부드럽게 움직이는 패럴랙스 이펙트 01

younajeong 2023. 4. 18. 22:54

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

패럴랙스 이펙트 01

이미지가 부드럽게 움직이는 패럴랙스 효과를 이용해서 메뉴효과를 만들어 보았습니다.

<완성본>

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>패럴랙스 이펙트01</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/parallax.css">
</head>
<body class="img01 bg01 font01">
    <header id="header">
        <h1>Javascript parallaxEffect01</h1>
        <p>패럴렉스 이펙트 : 메뉴효과</p>
        <ul>
            <li class="active"><a href="parallaxEffect01.html">1</a></li>
            <li><a href="parallaxEffect02.html">2</a></li>
            <li><a href="parallaxEffect03.html">3</a></li>
            <li><a href="parallaxEffect04.html">4</a></li>
            <li><a href="parallaxEffect05.html">5</a></li>
            <li><a href="parallaxEffect06.html">6</a></li>
            <li><a href="parallaxEffect07.html">7</a></li>
        </ul>
        </header>
        <!-- //header -->

        <nav class="parallax__nav">
            <ul>
                <li class="active"><a href="#section">메뉴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>
        <!-- //parallax__nav -->

        <main id="main">
            <div class="parallax__wrap">
                <section id="section1" class="parallax__item">
                    <span class="parallax__item__num">01</span>
                    <h2 class="parallax__item__title">Section1</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">용기를 가지되 허세는 부리지 말라.</p>
                </section>
                <!-- //sectrion1 -->

                <section id="section2" class="parallax__item">
                    <span class="parallax__item__num">02</span>
                    <h2 class="parallax__item__title">Section2</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">세상은 변하지 않는다 우리가 변한다.</p>
                </section>
                <!-- //sectrion2 -->

                <section id="section3" class="parallax__item">
                    <span class="parallax__item__num">03</span>
                    <h2 class="parallax__item__title">Section3</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">타인의 자존감을 높여주면 나의 인생이 반짝이게 된다.</p>
                </section>
                <!-- //sectrion3 -->

                <section id="section4" class="parallax__item">
                    <span class="parallax__item__num">04</span>
                    <h2 class="parallax__item__title">Section4</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">내 기분은 나만 정할 수 있어. 오늘 나는 '행복'으로 정할래.</p>
                </section>
                <!-- //sectrion4 -->

                <section id="section5" class="parallax__item">
                    <span class="parallax__item__num">05</span>
                    <h2 class="parallax__item__title">Section5</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">네 안을 들여다 보아라 넌 네가 생각하는 것보다 더 큰 존재다.</p>
                </section>
                <!-- //sectrion5 -->

                <section id="section6" class="parallax__item">
                    <span class="parallax__item__num">06</span>
                    <h2 class="parallax__item__title">Section6</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">사랑이란 다른 사람이 원하는 것을 네가 원하는 것보다 우선시 하는거야.</p>
                </section>
                <!-- //sectrion6 -->

                <section id="section7" class="parallax__item">
                    <span class="parallax__item__num">07</span>
                    <h2 class="parallax__item__title">Section7</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">모든 모험의 시작은 첫 걸음이 시작이다.</p>
                </section>
                <!-- //sectrion7 -->

                <section id="section8" class="parallax__item">
                    <span class="parallax__item__num">08</span>
                    <h2 class="parallax__item__title">Section8</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">가끔은 올바른 길이 가장 쉬운길이 아닐때도 있다.</p>
                </section>
                <!-- //sectrion8 -->

                <section id="section9" class="parallax__item">
                    <span class="parallax__item__num">09</span>
                    <h2 class="parallax__item__title">Section9</h2>
                    <figure class="parallax__item__imgWrap">
                        <div class="parallax__item__img"></div>
                    </figure>
                    <p class="parallax__item__desc">인생은 무한한 가능성을 가지고있다.</p>
                </section>
                <!-- //sectrion9 -->
            </div>
    
        </main>
        <!-- //main -->

        <aside class="parallax__info">
            <div class="scroll">scrollTop : <span>0</span>px</div>
            <div class="info">
                <ul>
                    <li>#section1 offset() : <span class="offset1">0</span>px</li>
                    <li>#section2 offset() : <span class="offset2">0</span>px</li>
                    <li>#section3 offset() : <span class="offset3">0</span>px</li>
                    <li>#section4 offset() : <span class="offset4">0</span>px</li>
                    <li>#section5 offset() : <span class="offset5">0</span>px</li>
                    <li>#section6 offset() : <span class="offset6">0</span>px</li>
                    <li>#section7 offset() : <span class="offset7">0</span>px</li>
                    <li>#section8 offset() : <span class="offset8">0</span>px</li>
                    <li>#section9 offset() : <span class="offset9">0</span>px</li>    
                </ul>
            </div>
        </aside>
        <!-- //parallax__info -->

        <footer id="footer">
            <a href="mailto:jeongyouna_@naver.com">jeongyouna_@naver.com</a>
        </footer>  
        <!-- //footer -->

HTML

전체적인 HTML구조로 header , nav, main, footer로 구조를 잡아줍니다.
head에는 link를 걸어두어서 css와 reset으로 갈 수 있는 경로를 지정해 줍니다.
header에는 id header를 주고 제목과 html경로로 갈 수 있는 목록을 만들어 줍니다.
nav에는 메뉴바를 만들어 주는데 section으로 이름을 붙혀서 1번부터 9번까지 메뉴바를 만들어 줍니다.
main에는 전체적인 parallax__wrap안에 section으로 나눠서 parallax__item, num , title figure를 사용해서 그 안에 img와 desc를 만들어 줍니다.
aside를 사용해서 parallax__info를 만들어 주는데 ul과 li로 offset위치값을 나타낼 수 있는 요소를 만들어 줍니다.
마지막으로 footer에는 메일이 들어갈 수 있도록 구조를 짜줍니다.

RESET&CSS

/* reset */
@import url('https://webfontworld.github.io/hallym/Hallym.css');
@import url('https://webfontworld.github.io/suncheon/Suncheon.css');
@import url('https://webfontworld.github.io/Poppins/Poppins.css');
@import url('https://webfontworld.github.io/kt/YUniverse.css');
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css');
@import url('https://webfontworld.github.io/busan/Busan.css');
@import url('https://webfontworld.github.io/GothicA1/GothicA1.css');
@import url('https://webfontworld.github.io/jeju/JejuGothic.css');
@import url('https://webfontworld.github.io/amore/AritaBuri.css');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap');

* {
    margin: 0;
    padding: 0;
    color: #fff;
}

*,*::before, *::after {
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #222;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}
li, ul, ol {
    list-style: none;
}
img {
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
}
.font01 {
    font-family: 'Hallym';
}
.font02 {
    font-family: 'Suncheon';
}
.font03 {
    font-family: 'Poppins';
}
.font04 {
    font-family: 'YUniverse';
}
.font05 {
    font-family: 'TheJamsil';
}
.font06 {
    font-family: 'NanumBarunGot';
}
.font07 {
    font-family: 'Busan';
}
.font08 {
    font-family: 'GothicA1';
}
.font09 {
    font-family: 'JejuGothic';
}
.font10 {
    font-family: 'AritaBuri';
}
body {
    background-color: #222;
}

/* parallax.css */

/* header */
#header {
    position: absolute;
    left: 20px;
    top: 20px;
    
}
#header h1 {
    margin-top: 0.3em;

}
#header ul {
    margin-top: 0.6em;
}
#header li {
    display: inline-block;
}
#header li a{
    color: #fff;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
}
#header li.active a {
    background-color: #fff;
    color: #000;
}

/* footer */
#footer {
    text-align: center;
    padding: 100px 0;
    
}
#footer a {
    color: #fff;
    font-size: 14px;
}
#footer a:hover {
    text-decoration: underline;
}

/* parallax__nav */
.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;
}
.parallax__nav li {
    display: inline;
    margin: 0 5px;
}
.parallax__nav li a {
    display: inline-block;
    padding: 5px 20px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
.parallax__nav li.active a {
    background-color: #fff;
    color: #000;
    border-radius: 20px;
    box-sizing: content-box;
}

/* parallax__wrap */
.parallax__wrap {
    max-width: 1600px;
    width: 98%;
    margin: 0 auto;
    /* background-color: rgba(255,255,255,0.1); */
}
.parallax__item {
    width: 1000px;
    max-width: 70vw;
    margin: 30vw auto;
    /* background-color: rgba(255,255,255,0.1); */
    margin-right: 0;
    position: relative;
    padding-top: 10vw;
    
}
.parallax__item:nth-child(even){
    margin-left: 0;
    text-align: right;
}
.parallax__item__num {
    font-size: 35vw;
    font-weight: 100;
    font-family: Lato;
    position: absolute;
    left: -5vw;
    top: -16vw;
    opacity: 0.07;
    z-index: 2;
}
.parallax__item:nth-child(even) .parallax__item__num {
    left: auto;
    right: -5vw;
}
.parallax__item__title {
    font-weight: bold;
}
.parallax__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    position: relative;
    z-index: -1;
}
.parallax__item__img {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../img/sliderEffect010-min.jpg);
    background-repeat: no-repeat;
    background-position:  center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: saturate(0%);
    transition: all 1s;
}
.parallax__item:nth-child(1) .parallax__item__img {
    background-image: url(../img/sliderEffect01-min.jpg);
}
.parallax__item:nth-child(2) .parallax__item__img {
    background-image: url(../img/sliderEffect02-min.jpg);
}
.parallax__item:nth-child(3) .parallax__item__img {
    background-image: url(../img/sliderEffect03-min.jpg);
}
.parallax__item:nth-child(4) .parallax__item__img {
    background-image: url(../img/sliderEffect04-min.jpg);
}
.parallax__item:nth-child(5) .parallax__item__img {
    background-image: url(../img/sliderEffect05-min.jpg);
}
.parallax__item:nth-child(6) .parallax__item__img {
    background-image: url(../img/sliderEffect06-min.jpg);
}
.parallax__item:nth-child(7) .parallax__item__img {
    background-image: url(../img/sliderEffect07-min.jpg);
}
.parallax__item:nth-child(8) .parallax__item__img {
    background-image: url(../img/sliderEffect08-min.jpg);
}
.parallax__item:nth-child(9) .parallax__item__img {
    background-image: url(../img/sliderEffect09-min.jpg);
}
.parallax__item__desc {
    font-size: 2.5vw;
    line-height: 1.4;
    margin-top: -5vw;
    margin-left: -4vw;
    word-break: keep-all;
}
.parallax__item:nth-child(even) .parallax__item__desc {
    margin-left: auto;
    margin-right: -4vw;
}
.parallax__info {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    padding: 10px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
}
@media(max-width: 1200px){
    .parallax__nav {
        padding: 10px;
        background-color: rgba(0,0,0,0.9);
        right: 10px;
        left: 10px;
        top: 10px;
        border-radius: 5px;
        text-align: center;
    }
    .parallax__nav  li {
        margin: 2px;
    }
    .parallax__nav  li a {
        font-size: 12px;
        padding: 0px 14px;
    }
}

RESET&CSS

reset은 슬라이더 reset에서 사용하던 소스를 가져오는데 font까지만 가져오고 body에는 어두운 배경색상을 설정해 줍니다.

CSS역시 슬라이더에서 쓰던거 그대로 가져오는데 header를 왼쪽으로 옮겨주고 구조들에게 필요한 css효과를 넣어주니다. 이미지는 nth-child()를 사용해서 이미지를 차례대로 넣어주었습니다. 이때 미이더쿼리를 사용해서 반응형까지 고려하며 CSS를 작업해 주었습니다.

<속성 알아가기>

nth-child(even) : CSS에서 선택자 중 하나로 짝수 번째 자식 요소들을 선택하는 방법입니다.
word-break : keep-all : 단어의 일부분이 줄바꿈이 되지 않도록 지정하는 방법입니다.
opacity : 요소의 투명도(불투명도)를 지정하는 방법입니다.
filter: saturate(0%) : 요소에 필터를 입히는 효과로 saturate는 채도를 입히는 방법으로 0%를 설정해서 흑백(그레이스케일)효과를 주는 방법입니다.

Javascript

<script>
        window.addEventListener("scroll", () => {
        let scrollTop = window.pageXOffset || window.scrollY || document.documentElement.scrollTop;
        document.querySelectorAll(".parallax__item").forEach((item,index) => {
            if(scrollTop>= item.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");
            }
        });
        document.querySelectorAll(".parallax__nav li a").forEach(li =>{
            li.addEventListener("click", (e)=>{
                e.preventDefault();
                document.querySelector(li.getAttribute("href")).scrollIntoView({
                    behavior:"smooth"
                })
            })
        })


        //info
        document.querySelector(".scroll span").innerText = parseInt(scrollTop);
        
         // document.querySelector(".info .offset1").innerText = document.getElementById("section1").offsetTop;
        // document.querySelector(".info .offset2").innerText = document.getElementById("section2").offsetTop;
        // document.querySelector(".info .offset3").innerText = document.getElementById("section3").offsetTop;
        // document.querySelector(".info .offset4").innerText = document.getElementById("section4").offsetTop;
        // document.querySelector(".info .offset5").innerText = document.getElementById("section5").offsetTop;
        // document.querySelector(".info .offset6").innerText = document.getElementById("section6").offsetTop;
        // document.querySelector(".info .offset7").innerText = document.getElementById("section7").offsetTop;
        // document.querySelector(".info .offset8").innerText = document.getElementById("section8").offsetTop;
        // document.querySelector(".info .offset9").innerText = document.getElementById("section9").offsetTop;


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

        //forEach문
         document.querySelectorAll(".info ul li").forEach((el, index) => {
             el.querySelector("span").innerText = document.getElementById("section"+(index+1)).offsetTop;
         });


        //for of 
         const a = document.querySelectorAll(".info ul li");
         let infoIndex = 0;

         for(let el of a){
       	    infoIndex++
            el.querySelector("span").innerText = document.getElementById("section"+infoIndex).offsetTop;
         }

         //for in
        const elements = document.querySelectorAll(".info ul li");

            for (let index in elements) {

            const el = elements[index];
            const infoIndex = parseInt(index) + 1;

            el.querySelector("span").innerText = document.getElementById(`section${infoIndex}`).offsetTop;
        }
    });
</script>

javascript

이미지가 움직일때 마다 위치값을 알 수 있는 방법은 바로 heigth값으로 알 수 있습니다.
따라서 window에서 scroll이라는 이벤트가 발생할 때 scrollTop이라는 let 변수를 지정해서 값을 이용하여 현재 스크롤 위치를 계산합니다.
그 후 documeent.querySelectorAll(".parallax__item")으로 parallax효과를 적용할 요소들을 가져와서 각 요소의 offsetTop 값과 비교해서 현재 스클롤 위치가 요소의 상단 위치보다 크거나 같을 경우 해당 요소에 대흥하는 parallax메뉴 아에템에 active클래스를 추가합니다.
또 (".parallax__nav li a")로 모든 parallax메뉴 아이템의 링크 요소를 가져와 클릭 이벤트 리스너를 사용해줍니다.
각 요소를 클리할때 e.prevetDefault()를 호출해서 링크 이동을 방지하고 대신 해당 요소의 href 속성값으로 식별된 대상 요소에게 부드러운 스크롤 효과와 함께 보여주도록 scrollIntoView() 메서드를 호출합니다.
document.qurySelector(".scroll span").innerText = paraseInt(scrollTop)는 현재 스크롤 위치를 가져와서 .scroll에 포함된 span요소를 출력합니다.
각 section 위치에 존재하는 위치값을 getElemetById로 호출해서 ID속성 값을 가진 요소를 반환시켜주면서 하나씩 호출 할 수 있지만 단점으로는 갯수가 많아지면 코드가 길어진다는 단점을 가지고 있습니다.
그래서 각 for문과 forEach , for of, for in문을 사용했습니다.

❥for문

1부터 9까지 반복하여 document.getElementById("section" + i).offsetTop 값을 가져와서 .info 클래스에 포함된 ".offset" + i 클래스에 출력시켜 줍니다.

❥for Each문

.info 클래스에 포함된 ul 요소의 각 자식 요소 li 마다 getElementById("section" +(index+1)).offsetTop 값을 가져와서 li요소 내에 있는 span요소에 출력시켜 줍니다.

❥for of문

.info클래스에 포함된 ul요소의 자식 요소들을 가져와서 for of문을 사용해서 각 요소에 대해 반복 작업을 수행합니다. 현재 요소의 인덱스를 infoIndex로 저장하고, 해당 요소내에 있는 span요소에 getElementById("section" +infoIndex).offsetTop 값을 출력시켜 줍니다.

❥for in문

.info클래스에 포함된 ul요소의 자식 요소들을 가져와서 for in문을 사용해서 각 요소 반복 작업을 수행합니다. index변수에 저장된 현재 요소의 인덱스를 parseInt()함수를 사용해서 숫자로 변환하고 infoIndex 변수에 1을 더해서 현재 요소의 식별자를 생성 후 해당 요소 내에있는 span요소에 getElementById(`section${infoIndex}`).offsetTop 값을 출력 시켜 줍니다.

*for in문은 객체의 요소를 순회하여 반복 할 때 사용하는 형식입니다.

현재글이미지가 부드럽게 움직이는 패럴랙스 이펙트 01

300x250

코딩 공부 기록장📁

GIT 블로그

오답노트, 퀴즈유형, 홈페이지제작, 슬라이드이펙트, 코딩공부, 함수, 레이아웃, jquery, gsap, 슬라이드효과, 사이트만들기, 애니메이션효과, 자바스크립트, css, 코딩, 피그마, 효과, 퀴즈사이트만들기, html, 코딩일기,

Today :
Yesterday :

Youna