[parallax] scrollr.js 라이브러리를 이용하여 패럴랙스 페이지 만들기

scrollr.js 라이브러리를 이용하여 패럴랙스 페이지 만들기

-scrollr.js 라이브러리를 이용하여 스크롤값에 따라 화면이 다양하게 보여지는 패럴랙스 페이지 만들기 

scrollr.js
"scrollr.js"는 스크롤 이벤트를 사용하여 패럴랙스 효과를 만드는 자바스크립트 라이브러리입니다.
스크롤 이벤트에 따라 요소의 위치, 크기, 회전 등의 CSS 속성을 변경하여 패럴랙스 효과를 구현합니다. 또한, 요소의 위치나 속성을 스크롤 위치에 따라 동적으로 계산하고 조작할 수 있어서 매우 다양한 효과를 구현할 수 있습니다.
scrollr.js는 jQuery를 기반으로 작성되었으며, 사용하기 쉬운 API와 다양한 설정 옵션을 제공

 

 

🏳‍🌈. 패럴랙스 란?

패럴랙스 효과(Parallax Effect)는 웹사이트에서 요소들이 서로 다른 속도로 움직이는 것처럼 보이는 시각적인 효과입니다.

 

완성화면

 

(화면에서 스크롤을 내려보세요)

 

 

✈. HTML

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

    <div id="section1">
        <div class="s1-text0 fixed"
        data-0="opacity: 1; "
        data-1000="font-size: 5vw; opacity: 0"
        >Hi,</div>
        <div class="s1-text1 fixed"
        data-1000="font-size: 0vw; opacity: 1; transition: all ease 1s;"
        data-2000="font-size: 9vw; opacity: 1; z-index: 7;"
        data-2500="font-size: 9vw; opacity: 1"
        data-3000="font-size: 0vw; opacity: 0"
        >Come-in!</div>
        <div class="s1-text2 fixed"
        data-3000="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg);"
        data-4000="font-size: 13vw; transform: translate(-50%, -50%) rotate(720deg)"
        data-8000="font-size: 0vw; opacity: 1"
        >Welcome</div>
        <div class="s1-text3 fixed"
        data-8000="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg);"
        data-9000="font-size: 13vw; transform: translate(-50%, -50%) rotate(720deg)"
        
        >Have a nice day!</div>
        <div class="s1-img1 fixed"
        data-2500="width:300vw;" 
        data-4000="width:50vw;"   
        >

            <div class="s1-img1-1"
            data-1000="opacity: 0;"
            data-3000="transform: scale(1) rotate(0deg);opacity: 0.5;"
            data-6000="transform: scale(1.5) rotate(180deg);opacity: 1;"
            data-9000="transform: scale(2) rotate(360deg);opacity: 1;"
            data-12000="transform: scale(1) rotate(720deg);opacity: 0.9;"
            >
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="s1-img1-2"
            data-1000="opacity: 0;"
            data-3000="transform: scale(1) rotate(0deg);opacity: 0.5;"
            data-6000="transform: scale(2) rotate(180deg);opacity: 1;"
            data-9000="transform: scale(1.5) rotate(360deg);opacity: 0.5;"
            data-12000="transform: scale(1) rotate(0deg);opacity: 0.9;"
            >
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="s1-img1-3"
            data-1000="opacity: 0;"
            data-3000="transform: scale(1) rotate(0deg);opacity: 0.5;"
            data-6000="transform: scale(1.5) rotate(180deg);opacity: 1;"
            data-9000="transform: scale(2) rotate(360deg);opacity: 0.5;"
            data-12000="transform: scale(1) rotate(720deg);opacity: 0.9;"
            >
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="s1-img1-4"
            data-1000="opacity: 0;"
            data-3000="transform: scale(1) rotate(0deg);opacity: 0.5;"
            data-6000="transform: scale(2) rotate(180deg);opacity: 1;"
            data-9000="transform: scale(1.5) rotate(360deg);opacity: 0.5;"
            data-12000="transform: scale(1) rotate(0deg);opacity: 0.9;"
            >
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>

- 쓰는 방법

<div class="s1-text1 fixed" 
data-1000="font-size: 0vw;>

//data-스크롤위치="css값"

-스크롤 값에 따라 css를 

 

✈. CSS

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Yeseva+One&display=swap');
        *{
            margin: 0;
            padding: 0;
            /* font-family: 'ReciaSerifDisplay'; */
            font-family: 'Shrikhand', cursive;
            box-sizing: border-box;
        }
        body {
            height: 10000px;
            /* background-color: #d0ae80; */
            background-color: #f4f4f4;
            /* background-color: #e9dea3; */
        }
        .scrollTop{
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 1000;
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: rgba(0,0,0,0.4);
            text-align: center;
            font-size: 14px;
            line-height: 40px;
        }
        .fixed {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
        .s1-text0 {
            letter-spacing: 0.5;
            font-size: 10vw;
            line-height: 1;
            color: #000000;
            text-shadow:10px 10px 10px #d0ae80;
            top: 5%;
            right: 0;

          }
        .s1-text1 {
            letter-spacing: 0.5;
            font-size: 30vw;
            line-height: 1;
            color: #174b5c;
            text-shadow:10px 10px 10px #d0ae80;

        }
        .s1-text2 {
            font-size: 0vw;
            line-height: 0.9;
            color: #cb392f;
            text-shadow:10px 10px 10px #d0ae80;
            opacity: 0.9;
            z-index: 7;
        }
        .s1-text3 {
            color: #f4b833;
            text-shadow:10px 10px 10px #000;
            z-index: 7;
            line-height: 0.8;
        }
        .s1-img1 {
            width: 30vw;
            height: 100vh;
        }
        .s1-img1 > div {
            height: 25vh;
            display: flex;
            justify-content: space-between;
        }
        .s1-img1 > div > div {
            width: 24vh;
            height: 24vh;
            background-position: center ;
            background-size: cover;
            background-repeat: no-repeat;
            border: solid 5px rgba(0,0,0,0.5);
            filter: saturate(0%);
        }

        .s1-img1-1 > div:nth-child(1) {background-image: url(https://source.unsplash.com/500x500/?dream);}
        .s1-img1-1 > div:nth-child(2) {background-image: url(https://source.unsplash.com/500x500/?forest);}
        .s1-img1-1 > div:nth-child(3) {background-image: url(https://source.unsplash.com/500x500/?beach);}
        .s1-img1-1 > div:nth-child(4) {background-image: url(https://source.unsplash.com/500x500/?city);}

        .s1-img1-2 > div:nth-child(1) {background-image: url(https://source.unsplash.com/500x500/?surf);}
        .s1-img1-2 > div:nth-child(2) {background-image: url(https://source.unsplash.com/500x500/?book);}
        .s1-img1-2 > div:nth-child(3) {background-image: url(https://source.unsplash.com/500x500/?sky);}
        .s1-img1-2 > div:nth-child(4) {background-image: url(https://source.unsplash.com/500x500/?car);}

        .s1-img1-3 > div:nth-child(1) {background-image: url(https://source.unsplash.com/500x500/?classic);}
        .s1-img1-3 > div:nth-child(2) {background-image: url(https://source.unsplash.com/500x500/?sea);}
        .s1-img1-3 > div:nth-child(3) {background-image: url(https://source.unsplash.com/500x500/?tree);}
        .s1-img1-3 > div:nth-child(4) {background-image: url(https://source.unsplash.com/500x500/?summer);}

        .s1-img1-4 > div:nth-child(1) {background-image: url(https://source.unsplash.com/500x500/?waterfall);}
        .s1-img1-4 > div:nth-child(2) {background-image: url(https://source.unsplash.com/500x500/?waterdrop);}
        .s1-img1-4 > div:nth-child(3) {background-image: url(https://source.unsplash.com/500x500/?vintage);}
        .s1-img1-4 > div:nth-child(4) {background-image: url(https://source.unsplash.com/500x500/?water);}

        /* .s1-img1-5 > div:nth-child(1) {background-image: url(https://source.unsplash.com/500x500/?car);}
        .s1-img1-5 > div:nth-child(2) {background-image: url(https://source.unsplash.com/500x500/?summer);}
        .s1-img1-5 > div:nth-child(3) {background-image: url(https://source.unsplash.com/500x500/?water);} */
    </style>

✈. JAVASCRIPT

    <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>

  -CDN

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>