Bomb Kirby Running

JAVASCRIPT

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

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

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 요소들 안에 이미지를 넣어주었습니다.

'JAVASCRIPT'의 다른글

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

관련글

댓글

티스토리툴바