예제/페럴랙스 이펙트

페럴랙스 이펙트02 : 플러그인

아라라_ 2023. 4. 20. 20:23

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

Frederick Philips Brooks
Mythical Man-Month 저자
728x90

오늘은 플러그인을 사용하여 스크롤을 내릴수록 애니메이션이 진행되는 효과를 주었습니다.

미리 말씀드리지만 소스가 길어요😂

css

 *{
            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);
            border-radius: 50%;
        }
        .fixed {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
        .s1-text1 {
            font-size: 30vw;
            line-height: 1;
            color: #000;
        }
        .s1-text2 {
            font-size: 30vw;
            line-height: 1;
            padding-top: 8vw;
        }
        .s1-text3 {
            font-size: 15vw;
            line-height: 1;
        }
        .s1-text4 {
            text-align: right;
            word-break: keep-all;
            font-size: 3vw;
            line-height: 1.2;
            font-family: "Rebecca";
            background-color: #E0E4DD;
        }
        .s1-text4 .pp {
            font-size: 2vw;
            font-family: "Rebecca";
        }
        .s1-text4 .last {
            font-size: 1vw;
            font-family: "Rebecca";
        }
        .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;
            color: #980088;
            /* filter: saturate(0%); */
        }
        .s1-img1 > div > div:first-child {
            width: 19vh;
            height: 19vh;
            background-position: center;
            background-size: cover;
        }
        .s1-img1 > div > div:last-child {
            width: 19vh;
            height: 19vh;
            background-position: center;
            background-size: cover;
        }

        .s1-img1-1 {
        }
        .s1-img1-1 > div:first-child {background-image: url(https://jo0132.github.io/web2023/assets/ico/icon.jpg)}
        .s1-img1-1 > div:last-child {background-image: url(https://siyoenkim.github.io/web2023/assets/ico/icon.jpg)}

        .s1-img1-2 {
        }
        .s1-img1-2 > div:first-child {background-image: url(https://kebab000.github.io/web2023/assets/ico/icon01.jpg)}
        .s1-img1-2 > div:last-child {background-image: url(https://dkseho9121.github.io/web2023/assets/ico/icon01.jpg);

        }
						....
  • body 요소에는 높이와 배경 색상이 지정되어 있습니다.
  • .scrollTop 클래스는 화면 상단으로 스크롤하는 버튼을 만들기 위한 스타일을 지정합니다.
  • .fixed 클래스는 화면 중앙에 고정되어 나타나는 요소의 위치와 스타일을 지정합니다.
  • s1-text1, s1-text2, s1-text3, s1-text4 클래스는 각각 텍스트의 스타일을 지정합니다.
  • s1-img1 클래스는 이미지 요소의 스타일을 지정하며, s1-img1 > div는 이미지 요소 내부의 div 요소에 대한 스타일을 지정합니다.
  • s1-img1-1과 s1-img1-2 클래스는 각각 이미지 요소 내부의 첫 번째와 두 번째 div 요소에 대한 스타일을 지정합니다.

 

html

<div class="scrollTop"></div>
    <section id="section1">
        <div class="s1-text1 fixed"
            data-0="font-size: 0vw; color: #000000; opacity:1;"
            data-1000="font-size: 30vw; color: #000000; opacity:1;"
            data-2000="font-size: 30vw; color: #990000; opacity:1;"
            data-3000="font-size: 0vw; color: #99000; opacity:0;" 
        >Viola</div>
        <div class="s1-text2 fixed"
            data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg); opacity:1"
            data-3000="font-size: 40vw; transform: translate(-50%, -50%) rotate(360deg); opacity:1"
            data-3500="font-size: 40vw; transform: translate(-50%, -50%) rotate(360deg); opacity:0"
        >Hello</div>
        <div class="s1-img1 fixed"
            data-3000="width: 200vw;"
            data-4000="width: 20vw;"
            >
            <div class="s1-img1-1">
                <div
                    data-3000="transform: translateX(100px) rotate(60deg);"    
                    data-4000="transform: translateX(0px) rotate(0deg);"
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);"
                    
            ></div>
                <div
                    data-3000="transform: translateX(-100px) rotate(-60deg);"    
                    data-4000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);"
                ></div>
            </div>
            <div class="s1-img1-2">
                <div
                    data-3000="transform: translateX(200px)rotate(60deg)"    
                    data-4000="transform: translateX(0px) rotate(0deg);"
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);" 
                ></div>
                <div
                    data-3000="transform: translateX(-200px) rotate(-60deg)"    
                    data-4000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);"
                ></div>
            </div>
            <div class="s1-img1-3">
                <div
                    data-3000="transform: translateX(300px) rotate(60deg)"    
                    data-4000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);"
                ></div>
                <div
                    data-3000="transform: translateX(-300px) rotate(-60deg)"    
                    data-4000="transform: translateX(0px) rotate(0deg);"
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
            </div>
            <div class="s1-img1-4">
                <div
                data-3000="transform: translateX(400px) rotate(60deg)"    
                data-4000="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(-60deg);"
                ></div>
                <div
                data-3000="transform: translateX(-400px) rotate(-60deg)"    
                data-4000="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(60deg);"
                ></div>
            </div>
            <div class="s1-img1-5">
                <div
                data-3000="transform: translateX(500px) rotate(60deg)"    
                data-4000="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(-60deg);"
                ></div>
                <div
                data-3000="transform: translateX(-500px) rotate(-60deg)"    
                data-4000="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(60deg);"
                ></div>
            </div>
        </div>
        <div class="s1-img1 fixed"
            data-3500="width: 200vw;"
            data-4500="width: 40vw;"
            >
            <div class="s1-img1-6">
                <div
                    data-3500="transform: translateX(100px) rotate(60deg);"    
                    data-4500="transform: translateX(0px) rotate(0deg);"   
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);" 
            ></div>
                <div
                    data-3500="transform: translateX(-100px) rotate(-60deg);"    
                    data-4500="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
            </div>
            <div class="s1-img1-7">
                <div
                    data-3500="transform: translateX(200px)rotate(60deg)"    
                    data-4500="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);" 
                ></div>
                <div
                    data-3500="transform: translateX(-200px) rotate(-60deg)"    
                    data-4500="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
            </div>
            <div class="s1-img1-8">
                <div
                    data-3500="transform: translateX(300px) rotate(60deg)"    
                    data-4500="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
                <div
                    data-3500="transform: translateX(-300px) rotate(-60deg)"    
                    data-4500="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);" 
                ></div>
            </div>
            <div class="s1-img1-9">
                <div
                data-3500="transform: translateX(400px) rotate(60deg)"    
                data-4500="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
                <div
                data-3500="transform: translateX(-400px) rotate(-60deg)"    
                data-4500="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(60deg);" 
                ></div>
            </div>
            <div class="s1-img1-10">
                <div
                data-3500="transform: translateX(500px) rotate(60deg)"    
                data-4500="transform: translateX(0px) rotate(0deg);"
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(60deg);"  
                ></div>
                <div
                data-3500="transform: translateX(-500px) rotate(-60deg)"    
                data-4500="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(60deg);" 
                ></div>
            </div>
        </div>
        <div class="s1-img1 fixed"
            data-4000="width: 200vw;"
            data-5000="width: 60vw;"
            >
            <div class="s1-img1-11">
                <div
                    data-4000="transform: translateX(100px) rotate(60deg);"    
                    data-5000="transform: translateX(0px) rotate(0deg);"    

                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);" 
            ></div>
                <div
                    data-4000="transform: translateX(-100px) rotate(-60deg);"    
                    data-5000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
            </div>
            <div class="s1-img1-12">
                <div
                    data-4000="transform: translateX(200px)rotate(60deg)"    
                    data-5000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
                <div
                    data-4000="transform: translateX(-200px) rotate(-60deg)"    
                    data-5000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);" 
                ></div>
            </div>
            <div class="s1-img1-13">
                <div
                    data-4000="transform: translateX(300px) rotate(60deg)"    
                    data-5000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
                <div
                    data-4000="transform: translateX(-300px) rotate(-60deg)"    
                    data-5000="transform: translateX(0px) rotate(0deg);" 
                    data-6000="transform: translateY(0px) rotate(0deg);"
                    data-7000="transform: translateY(-3000px) rotate(60deg);" 
                ></div>
            </div>
            <div class="s1-img1-14">
                <div
                data-4000="transform: translateX(400px) rotate(60deg)"    
                data-5000="transform: translateX(0px) rotate(0deg);" 
                data-6000="transform: translateY(0px) rotate(0deg);"
                data-7000="transform: translateY(-3000px) rotate(-60deg);" 
                ></div>
            </div>
        </div>
    </section>

    <section id="section2">
        <div class="s1-text3 fixed"
            data-5500="opacity:0; transform: rotate(45deg) translate(800px)"
            data-6500="opacity:1; transform: rotate(45deg) translate(800px)"
            data-8500="opacity:1;transform: rotate(45deg) translate(-6000px)"
        >
            javascriptjavascriptjavascript<br>
            css css css css css css css css css css css css css<br>
            php php php php php php php php php php php<br>
            sql sql sql sql sql sql sql sql<br>
            javascriptjavascriptjavascript<br>
            css css css css css css css css css css css css css<br>
            php php php php php php php php php php php<br>
            sql sql sql sql sql sql sql sql<br>
        </div>
    </section>
    <section id="section">
        <div class="s1-text4 fixed"
            data-8500="opacity:0; transform: scale(1)"
            data-10500="opacity:1; transform: scale(1)"
            data-12500="opacity:1; transform: scale(0)"
        >
        끊임 없이 노력하라. 체력이나 지능이 아니라 노력이야 말로 잠재력의 자물쇠를 푸는 열쇠다. <br>
        <span class="pp">- 윈스턴 처칠</span><br>
        <span class="last"
            data-9500="opacity:0"
            data-10500="opacity:1"
        >모두 화이팅!😆</span>
        </div>
    </section>
    <section id="section">
        <div class="s1-text4 fixed"
            data-12500="opacity:1; transform: translateY(-1000px)"
            data-12700="opacity:1; transform: translateY(0px)"
        >
        끝!
        </div>
    </section>
  • 이 페이지는 스크롤을 내리면서 다양한 애니메이션 효과를 보여주는 페이지로 보입니다.
  • HTML은 웹 페이지의 구조를 결정하며, 이 코드에서는 "section1"이라는 섹션과 그 안에 "s1-text1", "s1-text2", "s1-img1"이라는 클래스가 정의되어 있습니다.
  • CSS는 HTML 요소의 스타일을 지정하며, 이 코드에서는 각 클래스에 대해 다양한 스타일이 지정되어 있습니다. 예를 들어, "s1-text1" 클래스에는 폰트 크기와 색상, 투명도 등의 스타일이 설정되어 있습니다.
  • JavaScript는 HTML과 CSS로 구성된 웹 페이지를 동적으로 만들 수 있습니다. 이 코드에서는 "data-" 접두어를 가진 속성들을 이용하여 스크롤을 내리면서 특정 시간에 도달할 때의 요소의 상태를 지정하는 것으로 애니메이션 효과를 구현하고 있습니다. 예를 들어, "s1-text" 클래스의 "data-" 속성은 스크롤이 내려가면서 폰트 크기, 색상, 투명도를 시간에 따라 변경하게 됩니다.

 

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>
  • 먼저, skrollr.min.js 라이브러리를 호출하여 skrollr 객체를 생성합니다. 이 객체는 페이지 스크롤 이벤트를 추적하고, 스크롤 애니메이션을 생성하기 위한 다양한 메소드와 속성을 가지고 있습니다.
  • 다음으로, window.addEventListener 메소드를 사용하여 스크롤 이벤트를 감지합니다. 이벤트가 발생하면, window.pageYOffset 또는 window.scrollY를 사용하여 현재 스크롤 위치 값을 가져옵니다. 이 값은 parseInt() 함수를 사용하여 정수 형태로 변환되고, document.querySelector를 사용하여 scrollTop 클래스가 지정된 요소에 할당됩니다.
  • 따라서 이 코드는 페이지 스크롤 위치 값을 scrollTop 클래스가 지정된 요소에 표시하는 간단한 예제입니다. 이렇게 스크롤 위치 값을 감지하고 표시하는 기능은 웹사이트에서 다양한 애니메이션 및 상호작용 효과를 만드는 데 사용될 수 있습니다.

 

 

'예제/페럴랙스 이펙트'의 다른글

  • 현재글페럴랙스 이펙트02 : 플러그인

관련글

댓글

티스토리툴바