JAVASCRIPT

패럴랙스 이펙트 01

ture403 2023. 4. 20. 19:58

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형

완성된 화면 입니다.

 

HTML 화면입니다.

<body  
data-0=""
data-4000="background-color: #000;">
    <div class="scrollTop"></div>

    <section id="section">
        <div class="s1-text1 fixed"
            data-0="font-size : 0vw"
            data-1000="font-size: 5vw; opacity: 1 ;"
            data-2000="font-size: 10vw; opacity: 1 ;"
            data-2500="font-size: 0vw; opacity: 0 ;"
        >hello</div>
        <div></div>
        <div class="s1-text2 fixed"
            data-2500="font-size : 0vw; transform: translate(-50%, -50%) rotate(0deg);"
            data-3000="font-size: 10vw; transform : translate(-50%, -50%) rotate(720deg);"
            data-3300="font-size: 40vw; transform : translate(-50%, -50%) rotate(720deg);"
            data-3500="font-size: 0vw; transform : translate(-50%, -50%) rotate(720deg);"
        >javascript,react,php</div>
        
        <div class="s1-img1 fixed"
            data-3000="width: 200vw;"
            data-4000="width: 20vw;"
            data-5000="width: 200vw;"
        >
            <div class="s1-img1-1">
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);" data-4000=" opacity : 1 ; width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;" data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);" data-4000=" opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000=" opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
            </div>
            <div class="s1-img1-2">
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
            </div>
            <div class="s1-img1-3">
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
            </div>
            <div class="s1-img1-4">
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
            </div>
            <div class="s1-img1-5">
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
                <div data-3500="opacity : 0" data-3700="opacity : 1; transform: rotate3d(0, 0, 0, 0deg);"data-4000="opacity : 1;width: 40vw; transform: rotate3d(1, 1, 1, 90deg); border-radius:0;" data-4500="width: 20vw; transform: rotate3d(1, 1, 1, 180deg); border-radius: 50%;" data-4800="width: 10vw; transform: rotate3d(0, 0, 0, 0deg); border-radius: 50%;"data-5000="opacity:0"></div>
            </div>
            


            <div class="p fixed"
            data-0="font-size : 0vw; opacity : 0;"
            data-1000="font-size : 0vw; opacity : 0;"
            data-2000="font-size : 0vw; opacity : 0;"
            data-3000="font-size : 0vw; opacity : 0;"
            data-5000="font-size : 0vw; opacity : 0;"
            data-6000="font-size : 5vw; opacity : 1;"
            data-7000="font-size : 0vw; opacity : 0;"
            >남은시간 잘보내서 행복하게 삽니다.</div>
            </div>

            <div class="p fixed"
            data-0="font-size : 0vw; opacity : 0;"
            data-1000="font-size : 0vw; opacity : 0;"
            data-2000="font-size : 0vw; opacity : 0;"
            data-3000="font-size : 0vw; opacity : 0;"
            data-7000="font-size : 0vw; opacity : 0;"
            data-7100="font-size : 5vw; opacity : 1;"
            data-8000="font-size : 0vw; opacity : 0;"
            >그럼이만</div>
            </div>
    </section>
 </body>
  • skrollr.js의 양식을 이용해서 작성해주었습니다.
  • data-0은 스크롤이 0일때 의 효과를 주는 코드입니다.
  • 이런식으로 각각 주어서 노다가 방식으로 css효과를 주었습니다.

css 코드입니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Cookie";
}
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);
}
.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;
}
.s1-text2 {
    font-size: 0vw;
    line-height: 1;
    padding-top: 8vw;
}
.s1-text3 {
    font-size: 0vw;
    line-height: 1;
    padding-top: 8vw;
}
.s1-img1 {
    width: 250vw;
    height: 100vh;
}
.s1-img1 > div {
    height: 20vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.s1-img1 > div > div {
    width: 38vh;
    height: 19vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 5px solid #000;
    /* filter: saturate(0%); */
}
.s1-img1-1 {height: 20vh;}
.s1-img1-1 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?water);}
.s1-img1-1 > div:nth-of-type(2) {background-image: url(https://source.unsplash.com/500x500/?one);}
.s1-img1-1 > div:nth-of-type(3) {background-image: url(https://source.unsplash.com/500x500/?two);}
.s1-img1-1 > div:nth-of-type(4) {background-image: url(https://source.unsplash.com/500x500/?three);}
.s1-img1-1 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?four);}
.s1-img1-2 {height: 20vh;}
.s1-img1-2 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?fire);}
.s1-img1-2 > div:nth-of-type(2) {background-image: url(https://source.unsplash.com/500x500/?firewall);}
.s1-img1-2 > div:nth-of-type(3) {background-image: url(https://source.unsplash.com/500x500/?fireball);}
.s1-img1-2 > div:nth-of-type(4) {background-image: url(https://source.unsplash.com/500x500/?red);}
.s1-img1-2 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?fire);}
.s1-img1-3 {height: 20vh;}
.s1-img1-3 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?cat);}
.s1-img1-3 > div:nth-of-type(2) {background-image: url(https://source.unsplash.com/500x500/?dog);}
.s1-img1-3 > div:nth-of-type(3) {background-image: url(https://source.unsplash.com/500x500/?bear);}
.s1-img1-3 > div:nth-of-type(4) {background-image: url(https://source.unsplash.com/500x500/?horse);}
.s1-img1-3 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?bird);}
.s1-img1-4 {height: 20vh;}
.s1-img1-4 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?coding);}
.s1-img1-4 > div:nth-of-type(2) {background-image: url(https://source.unsplash.com/500x500/?clip);}
.s1-img1-4 > div:nth-of-type(3) {background-image: url(https://source.unsplash.com/500x500/?cellphone);}
.s1-img1-4 > div:nth-of-type(4) {background-image: url(https://source.unsplash.com/500x500/?notebook);}
.s1-img1-4 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?watch);}
.s1-img1-5 {height: 20vh;}
.s1-img1-5 > div:first-child {background-image: url(https://source.unsplash.com/500x500/?lan);}
.s1-img1-5 > div:nth-of-type(2) {background-image: url(https://source.unsplash.com/500x500/?tcp);}
.s1-img1-5 > div:nth-of-type(3) {background-image: url(https://source.unsplash.com/500x500/?ip);}
.s1-img1-5 > div:nth-of-type(4) {background-image: url(https://source.unsplash.com/500x500/?exam);}
.s1-img1-5 > div:last-child {background-image: url(https://source.unsplash.com/500x500/?hello);}

.inner {
    width: 200vw;

}
.p{
    font-size: 0vw;
    opacity: 0;
    line-height: 1;
    padding-top: 8vw;
    font-family: 'Poor Story';
}
  • scrollTop 값을 fixed 로 고정 시킵니다.
  • fixed 라는 클래스를 만들어서 positon:fiexd를 줘서 고정시는 값을 주었습니다.
  • 나머지는 필요한 셋팅을 했습니다.

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();
</script>
<script>
    window.addEventListener("scroll",()=>{
        let scrollTop = window.pageYOffset || window.scrollY;

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

 

자바스크립트

  • 자바스크립트는 skrollr.js를 연결해줍니다.
  • 그다음 화면에 scrollTop값을 html에 클래스인 scrollTop에 넣어 줍니다.

'JAVASCRIPT'의 다른글

  • 현재글패럴랙스 이펙트 01

관련글

댓글

티스토리툴바