페럴랙스 이펙트 페이지 만들기

JAVASCRIPT

페럴랙스 이펙트 페이지 만들기

^. ̫ .^ 2023. 4. 20. 21:37

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Maya Angelou

728x90

오늘은 페럴랙스를 이용한 웹페이지를 만들어보았습니다.

스크롤 하시면 각 효과들이 나옵니다!

html

<html lang="en">
<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>패럴랙스</title>
</head>
<body>
    <div class="scrollTop"></div>

    <section id="section1">
        <div class="s1-text1 fixed"
        data-0="font-size: 0vw; opacity: 1"
        data-1000="font-size: 10vw; opacity: 1"
        data-2000="font-size: 10vw; opacity: 1"
        data-3000="font-size: 0vw; opacity: 0"
        >I solemnly<br> swear that I'm<br> up to no good</div>
        <div class="s1-text2 fixed"
        data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg)"
        data-3000="font-size: 20vw; transform: translate(-50%, -50%) rotate(720deg)"
        data-3500="font-size: 10vw; opacity: 1"
        data-4000="font-size: 10vw; opacity: 1"
        data-5000="font-size: 0vw; opacity: 0"
        >Revelio!</div>
        <div class="s1-text1 fixed"
        data-0="font-size: 0vw; opacity: 0"
        data-9500="font-size: 0vw; opacity: 1"
        data-10500="font-size: 10vw; opacity: 1"
        data-11000="font-size: 30vw; opacity: 0"
        >Mischief<br> managed</div>
        <div class="s1-img1 fixed"
        data-3000="width: 200vw;"
        data-4000="width: 40vw"
        >
            <div class="s1-img1-1"
                data-3500="transform: rotate(0deg)"
                data-4500="transform: rotate(360deg)"
            >
                <div
                    data-3500="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
                <div
                    data-3500="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
            </div>
            <div class="s1-img1-2"
                data-3500="transform: rotate(0deg)"
                data-4500="transform: rotate(360deg)"
            >
                <div
                    data-3600="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
                <div
                    data-3600="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
            </div>
            <div class="s1-img1-3"
                data-3500="transform: rotate(0deg)"
                data-4500="transform: rotate(360deg)"
            >
                <div
                    data-3700="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
                <div
                    data-3700="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
            </div>
            <div class="s1-img1-4"
                data-3500="transform: rotate(0deg)"
                data-4500="transform: rotate(360deg)"
            >
                <div
                    data-3800="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
                <div
                    data-3800="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
            </div>
            <div class="s1-img1-5"
                data-3500="transform: rotate(0deg)"
                data-4500="transform: rotate(360deg)"
            >
                <div
                    data-3900="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
                <div
                    data-3900="transform: scale(2)"
                    data-4500="transform: scale(1)"
                    data-5000="opacity: 1"
                    data-6000="opacity: 0"
                ></div>
            </div>
    </section>    
    <section id="section2">
        <div class="s2-img1 fixed"
            data-0="opacity: 0"
            data-5000="opacity: 0"
            data-6000="width: 100vw; opacity: 1"
            data-8000="width: 20vw;"
            data-11000="width: 200vw;"
        >
            <div class="s2-img1-1"
                data-6000="transform: rotate(0deg)"
                data-10000="transform: rotate(360deg)"
            >
                <div
                    data-6000="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
                <div
                    data-6000="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
            </div>
            <div class="s2-img1-2"
                data-6000="transform: rotate(0deg)"
                data-10000="transform: rotate(360deg)"
            >
                <div
                    data-6000="transform: scale(2)"
                    data-6000="transform: scale(1)"
                ></div>
                <div
                    data-4100="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
            </div>
            <div class="s2-img1-3"
                data-6000="transform: rotate(0deg)"
                data-10000="transform: rotate(360deg)"
            >
                <div
                    data-6000="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
                <div
                    data-6000="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
            </div>
            <div class="s2-img1-4"
                data-6000="transform: rotate(0deg)"
                data-10000="transform: rotate(360deg)"
                >
                <div
                    data-6000="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
                <div
                    data-6000="transform: scale(2)"
                    data-4500="transform: scale(1)"
                ></div>
            </div>
            <div class="s2-img1-5"
                data-6000="transform: rotate(0deg)"
                data-10000="transform: rotate(360deg)"
                >
                <div
                    data-6000="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
                <div
                    data-6000="transform: scale(2)"
                    data-8000="transform: scale(1)"
                ></div>
            </div>
        </div>
    </section>
</body>
</html>

scrollTop값을 구할 영역을 만들어주고 값은 아래 스크립트를 통해 구했습니다.

그리고 section 2개를 만들어 각각의 이미지의 영역을 만들어 주었습니다.

그리고 각 스크롤 값이 변할때 마다 이미지들의 효과나 투명도, 크기를 설정해주었습니다.

script

<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
    <script type="text/javascript">
        let s = skrollr.init();
         window.addEventListener("scroll", ()=>{
            let scrollTop = window.pageYOffset || window.scrollY;

            document.querySelector(".scrollTop").innerText = parseInt(scrollTop);
        })
</script>

https://cdnjs.com/libraries/skrollr에서 cnd링크를 가져온 후 안에 이벤트 리스너를 사용해 스크롤 할 때 scrollTop 값을 구하고 parseInt로 정수로 만들어 innerText로 화면에 나타내줍니다.

css

<link href="https://webfontworld.github.io/recia/ReciaSerifDisplay.css" rel="stylesheet">
  <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "ReciaSerifDisplay";
        }
        body {
            height: 20000px;
            background-color: #E0E4DD;
        }
        .scrollTop {
            position: fixed;
            left: 10px;
            top: 10px;
            z-index: 1000;
            width: 40px;
            height: 40px;
            color: #fff;
            text-align: center;
            font-size: 14px;
            line-height: 40px;
            background-color: rgba(0,0,0,0.6);
        }
        .fixed {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
        .s1-text1 {
            font-size: 30vw;
            line-height: 1;
            padding-top: 8vw;
        }
        .s1-text2 {
            font-size: 0vw;
            line-height: 1;
            padding-top: 8vw;
        }
        .s1-img1 {
            width: 200vw;
            height: 100vh;
        }
        .s1-img1 > div {
            height: 20vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .s1-img1 > div > div {
            width: 19vh;
            height: 19vh;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border: 5px solid #000;
            filter: saturate(70%);
        }
        .s1-img1-1 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?harrypotter);}
        .s1-img1-1 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?hogwart);}
        
        .s1-img1-2 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?whiteowl);}
        .s1-img1-2 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?Quidditch);}
        
        .s1-img1-3 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?ravenclaw);}
        .s1-img1-3 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?slytherin);}
        
        .s1-img1-4 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?Gryffindor);}
        .s1-img1-4 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?Hufflepuff);}
        
        .s1-img1-5 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?Hogsmeade);}
        .s1-img1-5 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?voldemort);}

        .s2-img1 {
            width: 200vw;
            height: 100vh;
        }
        .s2-img1 > div {
            height: 20vh;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .s2-img1 > div > div {
            width: 19vh;
            height: 19vh;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border: 5px solid #000;
            filter: saturate(70%);
        }

        .s2-img1-1 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?Gringotts);}
        .s2-img1-1 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?Ollivanders);}
        
        .s2-img1-2 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?Horcrux);}
        .s2-img1-2 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?oldbook);}
        
        .s2-img1-3 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?hogwart);}
        .s2-img1-3 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?Hagrid);}
        
        .s2-img1-4 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?Malfoy);}
        .s2-img1-4 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?wizarding);}
        
        .s2-img1-5 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?death);}
        .s2-img1-5 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?castle);}

    </style>

링크 방식으로 폰트를 가져온 뒤 font-family로 폰트를 설정해주었습니다.

각 영역의 값을 설정해주고 first-child와 last-child를 사용해 div 요소들 안에 이미지를 넣어주었습니다.

현재글페럴랙스 이펙트 페이지 만들기

코딩공부 ^. ̫ .^ 님의 블로그입니다.

300x250

GIT 블로그

Loading data ...

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

코딩공부