예제로 공부하기/패럴럭스 효과

지옥의 스크롤

Hyeon been 2023. 4. 20. 20:16

한번씩 읽고 가세요.

“ 테스트 될 수 없다면, 요구하지도 말라 ”

- Ken Pugh
프리팩토링 저자
728x90

오늘은 스크롤 애니메이션을 공부해보았습니다.

<!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>패럴랙스 효과</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Nabla&family=Rubik+Dirt&family=Stardos+Stencil&display=swap" rel="stylesheet">

    <link href="https://webfontworld.github.io/recia/ReciaSerifDisplay.css" rel="stylesheet">
    <link href="https://webfontworld.github.io/Rebecca/Rebecca.css" rel="stylesheet">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Nabla', cursive;
    }
    body {
        height: 12000px;

    }
    .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;
        color: #ffdcdc;
        font-family: "Rebecca";

        
    }
    .s1-text2 {
        font-size: 0vw;
        line-height: 1;
        padding-top: 8vw;
        color: #1b7238;

    }
    .s1-text3 {
        font-size: 0vw;
        line-height: 1.5;
        text-align: center;
        font-family: "Rebecca";
        color: #fff;

    }

    .s1-text4 {
        font-size: 0vw;
        line-height: 1.5;
        text-align: center;
        font-family: 'Nabla', cursive;

    }
    .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 #000000;
    }
    .s1-img1-1 > div:first-child { background-image: url(https://dkdlelw.github.io/web2023/assets/ico/icon.jpg);}
    .s1-img1-1 > div:last-child { background-image: url(https://leeyouna21.github.io/web2023/assets/ico/icon01.jpg);}
    .s1-img1-2 > div:first-child { background-image: url(https://seolhee313.github.io/web2023/assets/ico/icon.jpg);}
    .s1-img1-2 > div:last-child { background-image: url(https://kebab000.github.io/web2023/assets/ico/icon01.jpg);}
    .s1-img1-3 > div:first-child { background-image: url(https://dkseho9121.github.io/web2023/assets/ico/icon01.jpg);}
    .s1-img1-3 > div:last-child { background-image: url(https://jinyongjang.github.io/web2023/assets/ico/icon01.jpg);}
    .s1-img1-4 > div:first-child { background-image: url(https://chohena.github.io/web2023/assets/ico/icon01.jpg);}
    .s1-img1-4 > div:last-child { background-image: url(https://kimdohyun2002.github.io/web2023/assets/ico/icon.jpg);}
    .s1-img1-5 > div:first-child { background-image: url(https://xlsak5.github.io/testAnGyonam/assets/ico/icon.jpg);}
    .s1-img1-5 > div:last-child { background-image: url(https://hyunmijin.github.io/web2023/assets/ico/icon.jpg);}

</style>
</head>
<body class="body"
data-0="background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);

"
>
    <div class="scrollTop"></div>

    <section id="section1">
        <div class="s1-text1 fixed" 
            data-0="font-size: 0vw; opacity:1"
            data-1800="font-size: 25vw; opacity: 1"
            data-2000="font-size: 100vw; opacity: 1"
            data-2100="font-size: 25vw; opacity: 1"
            data-3000="font-size: 0vw;  opacity: 0"
        >WEB</div>
        <div class="s1-text2 fixed"
            data-2500="font-size: 0vw; transform: translate(-50%,-50%) rotate(0deg) "
            data-3000="font-size: 30vw; transform: translate(-50%,-50%)  rotate(720deg)"
            data-3100="font-size: 32vw;"
            data-3200="font-size: 30vw;"
            data-3300="font-size: 32vw;"
            data-3400="font-size: 30vw;"
            data-3500="font-size: 32vw;"
            data-3600="font-size: 30vw;"
            data-7000="font-size: 30vw; opacity: 1"
            data-7100="font-size: 100vw; opacity: 0"
        >Hello</div>
        <div class="s1-img1 fixed"
            data-3000="width: 150vw;"
            data-5000="width: -10vw; "
            data-6000="opacity: 1; width: 70vw"
            data-6500="opacity: 0.5; width: 90vw"
            data-7000="opacity: 0.5; width: 95vw"
            data-8005="opacity: 0"
            data-9005="opacity: 1"
            data-10500="opacity: 1"
            data-11000="opacity: 0"
            

            >
            <div class="s1-img1-1"
            data-3500="transform: rotate(180deg); "
            data-4500="transform: rotate(360deg);"
            >
                <div></div>
                <div></div>
            </div>
            <div class="s1-img1-2"
            data-3500="transform: rotate(180deg); "
            data-4500="transform: rotate(360deg);"
            >
                <div></div>
                <div></div>
            </div>
            <div class="s1-img1-3"
            data-4000="transform: rotate(180deg);"
            data-5000="transform: rotate(360deg);"
            >
                <div></div>
                <div></div>
            </div>
            <div class="s1-img1-4"
            data-4500="transform: rotate(180deg); "
            data-5500="transform: rotate(360deg);"
            >
                <div></div>
                <div></div>
            </div>
            <div class="s1-img1-5"
            data-4999="transform: rotate(0deg); "
            data-5002="transform: rotate(180deg); opacity:1 "
            data-6000="transform: rotate(360deg)"
            >
            <div></div>
            <div></div>
        </div>

    </div>
    <div class="s1-text2 fixed"
    data-7100="opacity: 1;font-size: 0vw; transform: translate(-50%,-50%) rotate(0deg); "
    data-7200="font-size: 20vw; transform: translate(-50%,-50%)  rotate(720deg)"
    data-7300="font-size: 22vw;"
    data-7400="font-size: 20vw;"
    data-7500="font-size: 22vw;"
    data-7600="font-size: 20vw;"
    data-7700="font-size: 22vw;"
    data-7800="font-size: 20vw;"
    data-7900="font-size: 20vw; opacity: 1"
    data-8000="font-size: 100vw; opacity: 0"
>Fighting</div>

        <div class="s1-text3 fixed"
        data-7900="font-size: 4vw; transform: translate(-50%,-50%); opacity:0"
        data-9000="font-size: 4vw; transform: translate(-50%,-50%); opacity:1"
        data-9500="font-size: 4vw; transform: translate(-50%,-50%); opacity:0"

    >"실패는 재도전의 시작이다." - 헨리 포드</div>

        <div class="s1-text3 fixed"
        data-9000="font-size: 4vw; transform: translate(-50%,-50%); opacity:0"
        data-10000="font-size: 4vw; transform: translate(-50%,-50%); opacity:1"
        data-11000="font-size: 4vw; transform: translate(-50%,-50%); opacity:0"

    >"가장 어려운 일이 가장 중요한 일이다." - 알버트 아인슈타인" - 헨리 포드</div>

    
    <div class="s1-text3 fixed"
    data-10700="font-size: 1vw; transform: translate(-50%,-50%); opacity:0 "
    data-11000="font-size: 5vw; transform: translate(-50%,-50%); opacity:1"
    data-11500="font-size: 11vw; transform: translate(-50%,-50%);  opacity:1"


>가봅시다.</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();
    </script>

    <script>
        window.addEventListener("scroll", () => {
            let scrollTop = window.pageYOffset || window.scrollY;
            document.querySelector(".scrollTop").innerText = parseInt(scrollTop);
        });
    </script>
</body>
</html>

노가다..

    <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
    <script type="text/javascript">
        let s = skrollr.init();
    </script>

    <script>
        window.addEventListener("scroll", () => {
            let scrollTop = window.pageYOffset || window.scrollY;
            document.querySelector(".scrollTop").innerText = parseInt(scrollTop);
        });
    </script>

스크립트로 스크롤 값을 제일 먼저 가져와 .scrollTop 위치에 출력 시켜줍니다.

그 후 스크롤 애니메이션을 가능하게 해줄 라이브러리를 가져와줍니다.

        <div class="s1-text2 fixed"
            data-2500="font-size: 0vw; transform: translate(-50%,-50%) rotate(0deg) "
            data-3000="font-size: 30vw; transform: translate(-50%,-50%)  rotate(720deg)"

그 후 선택자 옆에 data-(스크롤 위치값) 위치값을 입력하면 그 스크롤이 그 위치값으로 갔을 경우 주고 싶은 효과를 " " 안에 css방식으로 효과를 넣어주면 됩니다.

 

'예제로 공부하기/패럴럭스 효과'의 다른글

  • 현재글지옥의 스크롤

관련글

댓글

티스토리툴바