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

Javascript

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

훙구 2023. 4. 20. 23:59

“ 시스템에는 서브시스템이 있고, 서브시스템에는 또 서브시스템이 있고, 이런 형식이 무한대로 반복되기 때문에 우리는 언제나 시작점에 서 있는 것이다. ”

- Alan J. Perlis
알골 프로그램 창시자

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

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

코딩하는 거북이 훙구 님의 블로그입니다.

300x250

Git블로그

Learn how we count contributions

Less

Today :
Yesterday :

	Apr	May	Jun	Jul	Aug	Sep	Oct	Nov	Dec	Jan	Feb	Mar
Sun
Mon
Tue
Wed
Thu
Fri
Sat

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

코딩하는 거북이

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

- Alan J. Perlis

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

HTML 작성하기

HTML 정리해보기

CSS 작성하기

CSS 정리해보기

Javascript 작성하기

Javscript 정리해보기

'Javascript'의 다른글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

2025. 04
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

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

- Alan J. Perlis

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

HTML 작성하기

HTML 정리해보기

CSS 작성하기

CSS 정리해보기

Javascript 작성하기

Javscript 정리해보기

'Javascript'의 다른글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역