Animated Turtle

Javascript

패럴랙스 이펙트 (플러그인 사용)

훙구 2023. 4. 20. 23:59

...

728x90
반응형

플러그인을 사용하여 패럴랙스 효과 만들기

이번에는 skroll.js를 사용하여 패럴랙스 효과를 준 페이지를 만들어 보도록 하겠습니다.

HTML 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>패럴랙스 효과 (플러그인 사용)</title>
    <link href="https://webfontworld.github.io/recia/ReciaSerifDisplay.css" rel="stylesheet">
</head>
<body>
    <div class="scrollTop"></div>

    <section id="section1">
        <div class="s1-text1 fixed"
            data-0="font-size: 0vw; opacity: 1"
            data-1000="font-size: 35vw; opacity: 1"
            data-1500="font-size: 30vw; opacity: 1"
            data-2000="font-size: 30vw; opacity: 1"
            data-3000="font-size: 0vw; opacity: 0"
        >HOONG</div>
        <div class="s1-text2 fixed"
            data-2500="font-size: 0vw; transform: translate(-50%, -50%) rotate(0deg);"
            data-3000="font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg);"
            data-5200="font-size: 40vw; transform: translate(-50%, -50%) rotate(720deg);"
            data-6200="font-size: 0vw; opacity:0 transform: translate(-50%, -50%) rotate(720deg);"
        >Gooo</div>
        <div class="s1-text3 fixed"
        data-5200="font-size:60vw; opacity:0; transform: translate(-50%, -50%) scale(15)"
        data-7000="font-size:60vw; opacity:1; transform: translate(-50%, -50%) scale(0.8)"
        >Class</div>
        <div class="s1-text4 fixed"
        data-12700="font-size:30vw; color: #000000; opacity:0; transform: translate(-50%, -50%) scale(1)"
        data-14700="font-size:30vw; color: #990000; opacity:1; transform: translate(-50%, -140%) scale(1)"
        >Fighting</div>
        <div class="s1-text5 fixed"
        data-14700="font-size:30vw; color: #990000; opacity:0; transform: translate(-50%, -140%) scale(1)"
        data-15700="font-size:30vw; color: #160000; opacity:1; transform: translate(-50%, -40%) scale(1)"
        >Together</div>
        <div class="s1-img1 fixed"
            data-3000="width: 200vw"
            data-4000="width: 50vw"
            data-7000="width: 50vw;"
            data-8000="width: 0;"
        >
            <div class="s1-img1-1"
                data-3200="transform: scale(2); opacity: 0"
                data-4200="transform: scale(1); opacity: 1"
                data-7500="transform: scale(1); opacity: 1"
                data-8500="transform: scale(0); opacity: 0"
            >
                <div
                    data-3000="transform: translateX(-1000px)"
                    data-4000="transform: translateX(0px)"
                ></div>
                <div
                    data-3000="transform: translateX(1000px)"
                    data-4000="transform: translateX(0px)"
                ></div>
            </div>
            <div class="s1-img1-2"
                data-3500="transform: scale(2); opacity: 0"
                data-4500="transform: scale(1); opacity: 1"
                data-7500="transform: scale(1); opacity: 1"
                data-8500="transform: scale(0); opacity: 0"
            >
                <div
                    data-3300="transform: translateX(-1000px)"
                    data-4300="transform: translateX(0px)"
                ></div>
                <div
                    data-3300="transform: translateX(1000px)"
                    data-4300="transform: translateX(0px)"
                ></div>
            </div>
            <div class="s1-img1-3"
                data-3800="transform: scale(2); opacity: 0"
                data-4800="transform: scale(1); opacity: 1"
                data-7500="transform: scale(1); opacity: 1"
                data-8500="transform: scale(0); opacity: 0"
            >
                <div
                    data-3600="transform: translateX(-1000px)"
                    data-4600="transform: translateX(0px)"
                ></div>
                <div
                    data-3600="transform: translateX(1000px)"
                    data-4600="transform: translateX(0px)"
                ></div>
            </div>
            <div class="s1-img1-4"
                data-4100="transform: scale(2); opacity: 0"
                data-5100="transform: scale(1); opacity: 1"
                data-7500="transform: scale(1); opacity: 1"
                data-8500="transform: scale(0); opacity: 0"
            >
                <div
                    data-3900="transform: translateX(-1000px)"
                    data-4900="transform: translateX(0px)"
                ></div>
                <div
                    data-3900="transform: translateX(1000px)"
                    data-4900="transform: translateX(0px)"
                ></div>
            </div>
            <div class="s1-img1-5"
                data-4400="transform: scale(2); opacity: 0"
                data-5400="transform: scale(1); opacity: 1"
                data-7500="transform: scale(1); opacity: 1"
                data-8500="transform: scale(0); opacity: 0"
            >
                <div
                    data-4200="transform: translateX(-1000px)"
                    data-5200="transform: translateX(0px)"
                ></div>
                <div
                    data-4200="transform: translateX(1000px)"
                    data-5200="transform: translateX(0px)"
                ></div>
            </div>
        </div>
        <div class="s1-img2"
            data-8500="transform: "
        >
            <div
                data-8500="opacity: 0;"
                data-9500="opacity: 1;"
                data-10500="opacity: 1;"
            ></div>
            <div
                data-8800="opacity: 0; top: 10%"
                data-9800="opacity: 1; top: 30%"
            ></div>
            <div
                data-8800="opacity: 0; top: 10%; z-index: 0; transform: translate(-50%, -50%) scale(0)"
                data-9800="opacity: 0; top: 30%; z-index: 0; transform: translate(-50%, -50%) scale(0)"
                data-10100="opacity: 1; top: 50%; z-index: 0; transform: translate(-50%, -50%) scale(0)"
                data-10700="opacity: 1; top: 50%; z-index: 0; transform: translate(-50%, -50%) scale(0)"
                data-11700="opacity: 1; top: 50%; z-index: 0; transform: translate(-50%, -50%) scale(0)"
                data-12700="opacity: 1; top: 50%; z-index: 100; transform: translate(-50%, -50%) scale(10)"
            ></div>
            <div
                data-8800="opacity: 0; top: 10%"
                data-9800="opacity: 0; top: 30%"
                data-10100="opacity: 0; top: 50%"
                data-10400="opacity: 1; top: 70%"
            ></div>
            <div
                data-8800="opacity: 0; top: 10%"
                data-9800="opacity: 0; top: 30%"
                data-10100="opacity: 0; top: 50%"
                data-10400="opacity: 0; top: 70%"
                data-10700="opacity: 1; top: 90%"
            ></div>
        </div>
        <div class="s1-img3 fixed"></div>
    </section>
</body>
</html>

HTML 정리해보기

  • 스크립트 부분에서 skroll.js 플러그인을 사용하기 때문에 html문서 내의 각각의 요소들의 속성이 변해야 하는 데이터 값과 속성을 모두 적어주었습니다.
  • 기본적으로 속성 변화가 있는 시작점의 데이터는 각각의 요소가 처음에 있어야 하는 모습 그대로의 속성을 가지고 있어야합니다.
  • 데이터의 흐름에 따라 속성에 변화를 주기 위해서는 모든 데이터에 해당하는 속성을 같이 적어주어야 합니다. (변화의 유무과 상관없이)

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);
}
.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: 30vw;
    line-height: 1;
    padding-top: 8vw;
    z-index: 10;
}
.s1-text4 {
    font-size: 30vw;
    line-height: 1;
    padding-top: 8vw;
    z-index: 1000;
}
.s1-text5 {
    font-size: 30vw;
    line-height: 1;
    padding-top: 8vw;
    z-index: 1000;
}
.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;
    filter: saturate(0%);
}
.s1-img1-1 > div {
    border: 3px solid #000;
}
.s1-img1-2 > div {
    border: 3px solid #000;
}
.s1-img1-3 > div {}
.s1-img1-4 > div {
    border: 3px solid #000;
}
.s1-img1-5 > div {
    border: 3px solid #000;
}

/* img1-1 */
.s1-img1-1 > div:first-child {
    background-image: url(img/AA07.jpg);
}
.s1-img1-1 > div:last-child {
    background-image: url(img/AA08.jpg);
}

/* img1-2 */
.s1-img1-2 > div:first-child {
    background-image: url(img/AA01.jpg);
}
.s1-img1-2 > div:last-child {
    background-image: url(img/AA02.jpg);
}

/* img1-3 */
/* .s1-img1-3 > div:first-child {
    background-image: url(https://source.unsplash.com/500x500/?horse);
}
.s1-img1-3 > div:last-child {
    background-image: url(https://source.unsplash.com/500x500/?rabbit);
} */

/* img1-4 */
.s1-img1-4 > div:first-child {
    background-image: url(img/AA03.jpg);
}
.s1-img1-4 > div:last-child {
    background-image: url(img/AA04.jpg);
}

/* img1-5 */
.s1-img1-5 > div:first-child {
    background-image: url(img/AA05.jpg);
}
.s1-img1-5 > div:last-child {
    background-image: url(img/AA06.jpg);
}
.s1-img2 > div {
    position: fixed;
    left: 50%;
    top: 10%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 100vh;
    height: 15vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.s1-img2 > div:nth-child(1) {
    background-image: url(https://source.unsplash.com/500x500/?coding);
    opacity: 0;            
}
.s1-img2 > div:nth-child(2) {
    background-image: url(https://source.unsplash.com/500x500/?programming);
    opacity: 0; 
}
.s1-img2 > div:nth-child(3) {
    background-color: #dde4de;
    opacity: 0; 
}
.s1-img2 > div:nth-child(4) {
    background-image: url(https://source.unsplash.com/500x500/?code);
    opacity: 0; 
}
.s1-img2 > div:nth-child(5) {
    background-image: url(https://source.unsplash.com/500x500/?program);
    opacity: 0; 
}

CSS 정리해보기

  • 처음부터 css의 스타일 속성으로 부여되어있는 속성값을 변경하기 위해서는 데이터의 시작부분에 같은 css 속성값을 주어야합니다.
  • 이미지 태그를 사용하지 않고 모든 이미지는 background-image로 작업하였습니다.
  • 패럴랙스 효과를 줄 때 각 요소들은 기본적으로 position:fixed 속성을 가지고 있어야합니다.

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").innerHTML = parseInt(scrollTop);
    });
</script>

Javscript 정리해보기

  • 사용할 skroll.js의 cdn을 가져와 적어주었습니다.
  • 그 아래는 skoll.js를 사용하기 위한 실행문입니다.
728x90
반응형

'Javascript'의 다른글

  • 현재글패럴랙스 이펙트 (플러그인 사용)

관련글

댓글

티스토리툴바