JAVASCRIPT

패럴랙스 이펙트 활용 해보기

이미사용 2023. 4. 20. 22:45
명언
-
728x90
반응형

※패럴랙스 이펙트

 

전체 소스

<!DOCTYPE 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>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "ReciaSerifDisplay";
        }
        body {
            height: 20000px;
            background-color: #E0E4DD;
            position: relative;
        }
        .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;
        }
        .img__inner {
            width: 40vw;
            height: 100vh;
            /* background-color: #fff; */
            display: flex;
            justify-content: center;

        }

        .s1-img1 {
            width: 19vh;  
            height: 100vh;
        }
        .s1-img1 > div> div {
            width: 18vh;
            height: 18vh;
            position: absolute;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border: 5px solid #000;
            filter: saturate(0%);
            right: 70vw;
            top: 55vw;
        }
        .s1-img2 {
            width: 19vh;
            height: 100vh;    
        } 
        .s1-img2 > div> div {
            width: 18vh;
            height: 18vh;
            position: absolute;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border: 5px solid #000;
            filter: saturate(0%);
            left: 70vw;
        }
        .s2-text2 {

            color:#fff;
            z-index: 1;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image:url(https://source.unsplash.com/500x500/?coding);
            
        
        }
        .s2-text3 {
            color:#fff;
            z-index: 1;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image:url(../parallax/img/IMG_3623.jpg);
        }
  

        .s1-img1-1 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?blue);}
        .s1-img2-1 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?red);}
        .s1-img1-2 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?white);}
        .s1-img2-2 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?sliver);}
        .s1-img1-3 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?pink);}
        .s1-img2-3 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?green);}
        .s1-img1-4 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?gray);}
        .s1-img2-4 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?yellow);}
        .s1-img1-5 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?purple);}
        .s1-img2-5 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?black);}

        
    </style>

    <link href="https://webfontworld.github.io/recia/ReciaSerifDisplay.css" rel="stylesheet">
</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: 30vw; opacity: 1"
            data-2000= "font-size: 30vw; opacity: 1"
            data-3000= "font-size: 0vw; opacity: 0"
        >hello</div>
        <div class="s1-text2 fixed"
            data-2000= "font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg)"
            data-3000= "font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg)"
        >World</div>
        <div class="img__inner fixed">
            <div class="s1-img1">
                <div class="s1-img1-1">
                    <div
                    data-3500= "right: 70vw; top: 40vw"
                    data-4500= "right: 50vw; top: 40vw"
                    data-5500= "right: 50vw; top: 0vw"
                    data-9000= "right: 50vw; top: 0vw"
                    data-10000= "right: 100vw; top: 0vw"
                    ></div>
                </div>
            
                <div class="s1-img1-2">
                    <div
                    data-4000= "right: 70vw; top: 40vw"
                    data-5000= "right: 50vw; top: 40vw"
                    data-6000= "right: 50vw; top: 10vw"
                    data-10000= "right: 50vw; top: 10vw"
                    data-11000= "right: 100vw; top: 10vw"
                    ></div>
                </div>
            
                <div class="s1-img1-3">
                    <div
                    data-4500= "right: 70vw; top: 40vw"
                    data-5500= "right: 50vw; top: 40vw"
                    data-6500= "right: 50vw; top: 20vw"
                    data-8000= "right: 50vw; top: 20vw"
                    data-9000= "right: 100vw; top: 20vw"

                    ></div>
                </div>
            
                <div class="s1-img1-4">
                    <div
                    data-5000= "right: 70vw; top: 40vw"
                    data-6000= "right: 50vw; top: 40vw"
                    data-7000= "right: 50vw; top: 30vw"
                    data-12000= "right: 50vw; top: 30vw"
                    data-13000= "right: 100vw; top: 30vw"

                    ></div>
                </div>
            
                <div class="s1-img1-5">
                    <div
                    data-5500= "right: 70vw; top: 40vw"
                    data-6500= "right: 50vw; top: 40vw"
                    data-7500= "right: 50vw; top: 40vw"
                    data-11000= "right: 50vw; top: 40vw"
                    data-12000= "right: 100vw; top: 40vw"
                    ></div>
                </div>
            </div>
        
            <div class="s1-img2">
                <div class="s1-img2-1">
                    <div
                    data-3500= "left: 70vw; top: 0vw"
                    data-4500= "left: 50vw; top: 0vw"
                    data-5500= "left: 50vw; top: 40vw"
                    data-12000= "left: 50vw; top: 40vw"
                    data-13000= "left: 100vw; top: 40vw"

                    ></div>
                </div>
            
                <div class="s1-img2-2">
                    <div
                    data-4000= "left: 70vw; top: 0vw"
                    data-5000= "left: 50vw; top: 0vw"
                    data-6000= "left: 50vw; top: 30vw"
                    data-8000= "left: 50vw; top: 30vw"
                    data-9000= "left: 100vw; top: 30vw"
                    ></div>
                </div>
            
                <div class="s1-img2-3">
                    <div
                    data-4500= "left: 70vw; top: 0vw"
                    data-5500= "left: 50vw; top: 0vw"
                    data-6500= "left: 50vw; top: 20vw"
                    data-10000= "left: 50vw; top: 20vw"
                    data-11000= "left: 100vw; top: 20vw"

                    ></div>
                </div>
            
                <div class="s1-img2-4">
                    <div
                    data-5000= "left: 70vw; top: 0vw"
                    data-6000= "left: 50vw; top: 0vw"
                    data-7000= "left: 50vw; top: 10vw"
                    data-9000= "left: 50vw; top: 10vw"
                    data-10000= "left: 100vw; top: 10vw"
                    ></div>
                </div>
            
                <div class="s1-img2-5">
                    <div
                    data-5500= "left: 70vw; top: 0vw"
                    data-6500= "left: 50vw; top: 0vw"
                    data-7500= "left: 50vw; top: 0vw"
                    data-11000= "left: 50vw; top: 0vw"
                    data-12000= "left: 100vw; top: 0vw"
                    ></div>
                </div>    
            </div>
        </div>
        <div class="s2-text2 fixed"
        data-13000= "width: 0vh; height: 0vh; font-size; 0vw; top:50%; left:50%;transform: translate(-50%, -50%); opacity: 1"
        data-13500= "width: 1vh; height: 1vh; font-size: 0vw; top:50%; left:50%; opacity: 1"
        data-14000= "width: 1vh; height: 1vh; font-size: 0vw; top:50%; left:50%; opacity: 1"
        data-14500= "width: 200vh; height: 1vh; font-size: 10vw; top:50%; left:50%; opacity: 1"
        data-15000= "width: 200vh; height: 100vh; font-size: 10vw; top:50%; left:50%; opacity: 1"
        >
        </div>
        <div class="s1-text2 fixed"
        data-15000= "font-size: 0vw; transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg); color: #fff"
        data-16000= "font-size: 15vw; transform: translate(-50%, -50%) rotateY(720deg) rotateX(50deg); color: #fff"
        >Javascript</div>
        <div class="s2-text3 fixed"
        data-16000= "width: 0vh; height: 0vh; font-size; 0vw;"
        data-17500= "width: 1vh; height: 1vh; font-size: 0vw; "
        data-18000= "width: 1vh; height: 1vh; font-size: 0vw; "
        data-18500= "width: 1vh; height: 50vh; font-size: 10vw;"
        data-19000= "width: 1vh; height: 50vh; font-size: 10vw;"
        data-19500= "width: 103vh; height: 50vh; font-size: 10vw;"
        data-20000= "width: 103vh; height: 50vh; font-size: 10vw; bo"
        >
        <div class="s1-text2 fixed"
        data-20000= "font-size: 0vw; transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg); color: #fff"
        data-21000= "font-size: 15vw; transform: translate(-50%, -50%) rotateY(0deg) rotateX(1080deg); color: #fff"
        >Fighting!</div>
        </div>
    </section>


<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 = scrollTop;
        });
    </script>
</body>
</html>

- 스크롤에 반응 하여 css 데이터가 변하는 소스를 가져와서 적용해주도록 합니다.

- 그후 스크롤이 값을 봐가며 자기가 어느곳에  어떻게 변화를 주고 싶은지 적어 줍니다.

- 적을 때는 <div 이사이에 적어야하며 > 변하지 않는 요소는 style에 적어도 상관이 없습니다.

 

javascript

- 스크롤을 하였을때 스크롤의 Y의 값을 가져오도록 하였고 그것을 .scrollTop 에 넣어 주었습니다.