패럴랙스 이펙트-플러그인을 활용하자!

오늘은 skroll.js를 사용해서 예쁜 패럴랙스 효과를 내보겠습니다 ㅎㅎ

자바스크립트 패럴랙스 효과 -플러그인

일단 플러그인을 연동 시켜야합니다!

<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.pageXOffset || window.scrollY;

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

이렇게 플러그인을 연동시킨 다음,  scrollTop값을 구해줍니다.

 

section1

<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"
    >Web</div>
    <div class="s1-text2 fixed"
        data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg); opacity: 1; color: rgba(255,100,100,1)"
        data-3500="font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg); opacity: 1; color: rgba(150,50,100,1)"
        data-7000="font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg); opacity: 0; color: rgba(130,80,20,1)"
    >Story</div>
    <div class="s1-img1 fixed"
        data-3000="width: 100vw"
        data-8000="width: 20vw"
        data-11000="width: 200vw"
    >
        <div class="s1-img1-1"
            data-3000="transform: scale(2); filter: saturate(100%)"
            data-3500="transform: scale(1.5); filter: saturate(0%)"
            data-4000="transform: scale(1); filter: saturate(100%)"
        >
            <div></div>
            <div></div>
        </div>
        <div class="s1-img1-2"
            data-4000="transform: scale(2)"
            data-4500="transform: scale(1.5)"
            data-5000="transform: scale(1)"
        >
            <div></div>
            <div></div>
        </div>
        <div class="s1-img1-3"
            data-5000="transform: scale(2)"
            data-5500="transform: scale(1.5)"
            data-6000="transform: scale(1)"
        >
            <div></div>
            <div></div>
        </div>
        <div class="s1-img1-4"
            data-6000="transform: scale(2)"
            data-6500="transform: scale(1.5)"
            data-7000="transform: scale(1)"
        >
            <div></div>
            <div></div>
        </div>
        <div class="s1-img1-5"
            data-7000="transform: scale(2)"
            data-7500="transform: scale(1.5)"
            data-8000="transform: scale(1)"
            data-8500="transform: scale(1)"
        >
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="s1-text3 fixed"
        data-8500="font-size: 0vw; opacity: 1; color: rgba(255,100,100,1)"
        data-9000="font-size: 30vw; opacity: 1; color: rgba(255,550,200,1)"
        data-9500="font-size: 30vw; opacity: 1; color: rgba(255,700,300,1)"
        data-10000="font-size: 80vw; opacity: 0; color: rgba(255,100,400,1)"
    >Boy</div>
    <div class="s1-text4 fixed"
        data-8500="font-size: 0vw; opacity: 1; color: rgba(0,0,0,1)"
        data-9000="font-size: 30vw; opacity: 1; color: rgba(0,0,0,1)"
        data-9500="font-size: 30vw; opacity: 1; color: rgba(0,0,0,1)"
        data-10000="font-size: 80vw; opacity: 0; color: rgba(0,0,0,1)"
    >Boy</div>
    <div class="s1-text5 fixed"
        data-10000="font-size: 0vw; opacity: 1; color: rgba(0,0,0,1)"
        data-10500="font-size: 30vw; opacity: 1; color: rgba(0,0,0,1)"
        data-11000="font-size: 30vw; opacity: 0; color: rgba(0,0,0,1)"
    >And</div>
</section>

div.s1-text1: "Web"이라는 텍스트를 포함하는 엘리먼트
div.s1-text2: "Story"라는 텍스트를 포함하는 엘리먼트
div.s1-img1: 5개의 div 엘리먼트를 포함하는 엘리먼트. 각각의 div 엘리먼트는 다른 이미지를 포함하며, 순차적으로 나타나고 사라집니다.
div.s1-text3: "Boy"라는 텍스트를 포함하는 엘리먼트
div.s1-text4: "Boy"라는 텍스트를 포함하는 엘리먼트
div.s1-text5: "And"라는 텍스트를 포함하는 엘리먼트

각각의 엘리먼트는 "fixed" 클래스를 가지고 있으며, 애니메이션의 효과를 적용하기 위해 "data-" 속성을 사용합니다. "data-" 속성은 각각의 엘리먼트가 어떤 시점에서 어떤 애니메이션을 수행할지를 지정합니다. 예를 들어, "data-0"은 해당 엘리먼트가 초기 상태일 때의 값을 나타내며, "data-1000"은 1초 후에 엘리먼트가 어떻게 변할지를 나타냅니다.

 

section2

<section id="section2">
    <div class="s2-img1 fixed"
        data-11000="saturate(0%); transform: translate(-50%, -50%) rotate(0deg); opacity: 0;"
        data-12000="saturate(1%); transform: translate(-50%, -50%) rotate(360deg); opacity: 1;"
        data-14000="saturate(0%); transform: translate(-50%, -50%) rotate(0); opacity: 0;"
    >
    </div>
</section>

<section> 태그는 문서에서 섹션을 나타내며, 여기에서는 id="section2"로 지정됩니다.

<div> 태그는 문서에서 블록 수준의 요소를 나타내며, 이미지가 포함됩니다. class="s2-img1 fixed"로 지정되어 있으며, fixed 속성을 가지므로 스크롤해도 위치가 고정됩니다.

이미지에 대한 애니메이션은 data- 속성을 사용하여 지정됩니다. data-11000에서 data-14000까지의 시간 동안 이미지는 360도 회전하고, 포화도(saturation)가 0%에서 1%로 증가한 다음, 포화도가 0%가 되며 이미지가 희미해집니다.

section3

<div id="section3">
    <div class="s3-text5 fixed"
        data-12500="font-size: 0vw; opacity: 1; color: rgb(255, 224, 48, 1)"
        data-12700="font-size: 8vw; opacity: 1; color: rgb(150, 150, 48, 1)"
        data-13000="font-size: 15vw; opacity: 1; color: rgb(62, 255, 62, 1)"
        data-13500="font-size: 30vw; opacity: 0; color: rgb(62, 62, 255, 1)"
    >Coooool Students</div>
    <div class="s3-text6 fixed"
        data-12500="font-size: 0vw; opacity: 1; color: rgba(0,0,0,1)"
        data-12700="font-size: 8vw; opacity: 1; color: rgba(0,0,0,1)"
        data-13000="font-size: 15vw; opacity: 1; color: rgba(0,0,0,1)"
        data-13500="font-size: 30vw; opacity: 0; color: rgba(0,0,0,1)"
    >Coooool Students</div>

    <div class="s3-img1"
        data-13500="opacity:0"
        data-13700="opacity:1"
        data-14500="border-radius: 0"
    >
        <div 
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(2); border-radius: 0"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div 
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-13500="opacity: 0; transform: scale(0); border-radius: 0"
            data-14500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-15000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
        <div
            data-15000="opacity: 0; transform: scale(0); border-radius: 0"
            data-15500="opacity: 1; transform: scale(1); border-radius: 50px"
            data-16000="opacity: 0; transform: scale(1); border-radius: 100px"
        ></div>
    </div>
</div>

섹션 3은 'Coooool Students'라는 텍스트와 함께 여러 개의 원형 이미지가 있는 섹션입니다.

이 코드에서는 CSS의 애니메이션 기능을 사용하여 섹션 3을 디자인합니다. 각 요소에는 "data-" 접두사가 붙은 여러 속성이 있으며, 이는 애니메이션 효과를 적용할 때 사용됩니다.

예를 들어, "s3-text5" 요소는 처음에는 폰트 크기가 0vw이고 투명도가 1이며, 글자 색상이 노란색으로 지정되어 있습니다. 그러나 시간이 지남에 따라 폰트 크기와 색상, 투명도 등이 변경됩니다.

마찬가지로, "s3-img1" 요소는 초기에는 투명도가 0이며, 시간이 지남에 따라 투명도와 테두리 반경이 변경되며 이미지의 크기가 변화합니다.

section4

<div id="section4">
    <div class="s4-text1 fixed">
        <div class="s3-text5 fixed"
        data-16000="font-size: 0vw; opacity: 1; color: rgb(255, 224, 48, 1)"
        data-16500="font-size: 8vw; opacity: 1; color: rgb(150, 150, 48, 1)"
        data-17000="font-size: 15vw; opacity: 1; color: rgb(62, 255, 62, 1)"
        data-18000="font-size: 30vw; opacity: 0; color: rgb(62, 62, 255, 1)"
        >Fighting Together</div>
    </div>
</div>

완성된 페이지

 

https://yeodaseul4355.github.io/web2023/javascirpt/parallax/parallaxEffectAA.html