자바스크립트 패럴랙스- skrollr.js를이용해서 만들어 보기

패럴랙스효과주기  skrollr.js 을 이용한 

iframe의 width값이 작아 잘안나와요 ㅜ 느낌만 봐주세요 ! 

 skrollr.js 란? 

skrollr은 JavaScript 라이브러리로, 스크롤 이벤트를 이용하여 웹사이트에 다양한 애니메이션을 적용할 수 있습니다.

보다 쉽게 css 애니매이션효과를 쉽게 줄수있어요 

 

공식홈페이지를 가시면 좀더 다양한 예제와 설명을 볼수 있어요 ! 

https://prinzhorn.github.io/skrollr/

skrollr - parallax scrolling for the masses

 

 전체 소스는 요기 

먼저 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(
     smoothScrolling: true
    );

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

skrollr은 브라우저의 scroll값에 따라 이벤트를 부여할수있어요 

init()으로 초기화 해주구요

 

body를 볼게요 ! 

<div class="scrollTop"></div>
    <section id="section1">
        <div class="s1-text1 fixed"
        data-0="font-size:0vw; opacity:0"
        data-1000="font-size:30vw; opacity:1"
        data-1500="font-size:30vw; opacity:0"
        >webstoryboy</div>
        <div class="s1-text2 fixed"
        data-1500="font-size:0vw; opacity:0"
        data-2000="font-size:30vw; opacity:1"
        data-4000="font-size:30vw; opacity:0"
        >class</div>
        <div class="s1-text3 fixed"
        data-1500="font-size:0vw; opacity:0"
        data-4000="font-size:30vw; opacity:0"
        data-12000="font-size:0vw; opacity:0"
        data-13000="font-size:30vw; opacity:1"
        data-14000="font-size:30vw; opacity:0"
        >HTML</div>
        <div class="s1-text4 fixed"
        data-1500="font-size:0vw; opacity:0"
        data-17000="font-size:0vw; opacity:0"
        data-18000="font-size:30vw; opacity:1"
        data-19000="font-size:30vw; opacity:0"
        >javascript</div>
        <div class="s1-text5 fixed"
        data-1500="font-size:0vw; opacity:0"
        data-4000="font-size:30vw; opacity:0"
        data-20000="font-size:0vw; opacity:0"
        data-21000="font-size:30vw; opacity:1"
        data-23000="font-size:30vw; opacity:0"
        >CSS</div>
        <div class="s1-text6 fixed"
        data-1500="font-size:0vw; opacity:0"
        data-25000="font-size:0vw; opacity:0"
        data-26000="font-size:30vw; opacity:1"
        data-27000="font-size:30vw; opacity:0"
        >PHP</div>
        <div class="s1-text7 fixed"
        data-29000="font-size:0vw; opacity:0"
        data-30000="font-size:7vw; opacity:1"
        >ya nu doo <br>
        good programer</div>
        <div class="s1-img1 fixed"
        data-2500="width: 200vw;"
        data-4000="width :30vw;"
        >
            <div class="s1-img1-1"
            data-9000="transform:translatey(0%)"
            data-10000="transform:translateY(200%)">
                <div
                data-10000=" transform: scale(1)translateX(0%);opacity:1"
                data-11000=" transform: scale(3)translateX(-20%);opacity:1"
                data-12000=" opacity:0"
                ></div>
                <div
                data-10000=" transform: scale(1)translateX(0%);opacity:1"
                data-11000=" transform: scale(3)translateX(20%);opacity:1"
                data-12000=" opacity:0"
                >
                </div>
            </div>
            <div class="s1-img1-2"
            data-5000="transform:translateX(0%)"
            data-6000="transform:translateX(300%)"
            data-12000="transform:translateX(300%)"
            data-13000="transform:translatey(0%)"
            data-14000="transform:translateY(100%)"
            >
                <div
                data-15000=" transform: scale(1)translateX(0%);opacity:1"
                data-16000=" transform: scale(3)translateX(-20%);opacity:1"
                data-17000=" opacity:0"
            
                ></div>
                <div
                data-15000=" transform: scale(1)translateX(0%);opacity:1"
                data-16000=" transform: scale(3)translateX(20%);opacity:1"
                data-17000=" opacity:0"
                ></div>
            </div>
            <div class="s1-img1-3"
            data-6000="transform:translateX(0%)"
            data-7000="transform:translateX(300%)"
            data-17000="transform:translateX(300%)"
            data-18000="transform:translateX(0%)"
            >
                <div
                data-18000=" transform: scale(1) translateX(0%);opacity:1"
                data-19000=" transform: scale(3) translateX(-20%);opacity:1"
                data-20000=" opacity:0"
                ></div>
                <div
                data-18000=" transform: scale(1)translateX(0%);opacity:1"
                data-19000=" transform: scale(3)translateX(20%);opacity:1"
                data-20000=" opacity:0"
                ></div>
            </div>
            <div class="s1-img1-4"
            data-7000="transform:translateX(0%)"
            data-8000="transform:translateX(300%)"
            data-21000="transform:translateX(300%)"
            data-22000="transform:translatey(0%)"
            data-23000="transform:translateY(-100%)"
            >
                <div
                data-23000=" transform: scale(1)translateX(0%);opacity:1"
                data-24000=" transform: scale(3)translateX(-20%);opacity:1"
                data-25000=" opacity:0"

                ></div>
                <div
                data-23000=" transform: scale(1)translateX(0%);opacity:1"
                data-24000=" transform: scale(3)translateX(20%);opacity:1"
                data-25000=" opacity:0"

                ></div>
            </div>
            <div class="s1-img1-5"
            data-8000="transform:translateX(0%)"
            data-9000="transform:translateX(300%)"
            data-25000="transform:translateX(300%)"
            data-26000="transform:translatey(0%)"
            data-27000="transform:translateY(-200%)">
                <div
                data-27000=" transform: scale(1)translateX(0%);opacity:1"
                data-28000=" transform: scale(3)translateX(-20%);opacity:1"
                data-29000=" opacity:0"
                ></div>
                <div
                data-27000=" transform: scale(1)translateX(0%);opacity:1"
                data-28000=" transform: scale(3)translateX(20%);opacity:1"
                data-29000=" opacity:0"
                ></div>
            </div>            
        </div>
        
    </section>

div안에 있는 data-xxxxx 값에 따라 동작을 수행해요 있어요 

 

css 소스는 요기 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "ReciaSerifDisplay";
}
body {
    height: 31000px;
    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);
}
.fixed {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.s1-text1 {
    font-size: 30vw;
    line-height: 1;
}
.s1-text2 {
    font-size: 0vw;
    line-height: 1.4;
    padding-top: 8vh;
}
.s1-text3 {
    font-size: 0vw;
    line-height: 1.4;
    padding-top: 8vh;
}
.s1-text4 {
    font-size: 0vw;
    line-height: 1.4;
    padding-top: 8vh;
}
.s1-text5 {
    font-size: 0vw;
    line-height: 1.4;
    padding-top: 8vh;
}
.s1-text6 {
    font-size: 0vw;
    line-height: 1.4;
    padding-top: 8vh;
}.s1-text7 {
    font-size: 0vw;
    line-height: 1.4;
    padding-top: 8vh;
    text-align: center;
}

.s1-img1 {
    width: 100vw;
    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 black;
    filter: saturate(0%);
}
.s1-img1-1 {
}
.s1-img1-1 > div:first-child {
    background-image: url(https://source.unsplash.com/500x500/?html);
}
.s1-img1-1 > div:last-child {
    background-image: url(https://source.unsplash.com/500x500/?html?v=1);
}
.s1-img1-2 {
    height: 20vh;
}
.s1-img1-2 > div:first-child {
    background-image: url(https://source.unsplash.com/500x500/?javascript);
}
.s1-img1-2 > div:last-child {
    background-image: url(https://source.unsplash.com/500x500/?javascript?v=1);
}
.s1-img1-3 {
    height: 20vh;
}
.s1-img1-3 > div:first-child {
    background-image: url(https://source.unsplash.com/500x500/?css);
}
.s1-img1-3 > div:last-child {
    background-image: url(https://source.unsplash.com/500x500/?css?v=1);
}
.s1-img1-4 {
    height: 20vh;
}
.s1-img1-4 > div:first-child {
    background-image: url(https://source.unsplash.com/500x500/?PHP?v=1);

}
.s1-img1-4 > div:last-child {
    background-image: url(https://source.unsplash.com/500x500/?PHP);
}
.s1-img1-5 {
    height: 20vh;
}
.s1-img1-5 > div:first-child {
    background-image: url(https://source.unsplash.com/500x500/?DESIGN);
}
.s1-img1-5 > div:last-child {
    background-image: url(https://source.unsplash.com/500x500/?DESIGN?v=1);
}

위처럼 css 디자인만 설정한뒤

나머지효과는 body에서 구현할수 있어 보다 쉽게 애니매이션 효과를 줄수 있어요 !