본문 바로가기
Tutorial/Portfolio

가로 모드 스므스 효과 만들기

by @webs 2022. 12. 27.

가로 모드 스므스 효과 만들기

Tutorial/Portfolio

가로 모드 스므스 효과 만들기

by @webs 2022. 12. 26.
Tutorial
가로 모드 스므스 효과 만들기
난이도 중간

소개

안녕하세요🤭 이번에는 가로모드를 만들어 보겠습니다. GSAP1를 이용하여 가로모드를 구성하고, Lenis2를 이용하여 스므스 효과를 줄 것입니다. 생각보다 어렵지 않으니, 잘 따라해주시면, 퀄리티 있는 포트폴리오를 만들 수 있습니다. 그럼 시작해보겠습니다.🥲


01. 기본 코딩

우선 구조는 header, main, footer로 설정하겠습니다.

<header id="header"></header>
<!-- //header -->

<main id="main"></main>
<!-- //main -->

<footer id="footer"></footer>
<!-- //footer -->
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}

header 영역을 설정하겠습니다. 헤더는 상단에 고정시키고, 배경은 블러 효과를 주겠습니다. 메뉴는 3단으로 정렬하기 위해서, display: flex를 설정하였습니다.

<header id="header">
    <nav>
        <ul>
            <li><a href="#">About</a></li>
            <li>
                <a href="#">Site</a>
                <a href="#">Work</a>
                <a href="#">Script</a>
            </li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</header>
<!-- //header -->

구글 폰트도 사용하여, 폰트를 설정하겠습니다.

<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
/* header */
#header {
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    z-index: 10000;
    border-bottom: 1px solid #2e382848;
    backdrop-filter : blur(10px)
}
#header ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#header li a {
    font-family: 'Abel';
    padding: 20px;
    display: inline-block;
    text-transform: uppercase;
    color: #202020;
}

footer 영역을 설정하겠습니다. 푸터 영역은 별거 없으니, 참고만 하시고 넘어가셔도 될 것 같네요! 🥰

<footer id="footer">
    <a href="mailto:webstoryboy@naver.com">webstoryboy@naver.com</a>
</footer>
<!-- //footer -->
/* footer */
#footer {
    text-align: center;
    font-family: 'Abel';
    padding: 10px;
}
#footer a {
    color: #000;
}

이제 메인 영역을 설정하겠습니다. 메인은 3개의 섹션으로 나누고, 두번째 섹션은 가운데 정렬할 것입니다. 그래서 첫번째 섹션과 세번째 섹션은 똑같습니다.

<main id="main">
    <section id="section1">
        <div class="text__effect1">
            <div>frontend</div>
            <div>devel</div>
        </div>
        <div class="text__effect2">
            <div class="left"><span>box1</span></div>
            <div class="right"><span>box2</span></div>
        </div>
        <div class="text__effect3">
            <div class="left"><span>box3</span></div>
            <div class="right"><span>box4</span></div>
        </div>
    </section> 
    <!-- //section1 -->
    <section id="section2" class="horizontal">
        <h2><span>creative website</span></h2>
        <div class="hor__wrap">
            <div class="hor"><span>site1</span></div>
            <div class="hor"><span>site2</span></div>
            <div class="hor"><span>site3</span></div>
            <div class="hor"><span>site4</span></div>
            <div class="hor"><span>site5</span></div>
        </div>
    </section>
    <!-- //section2 -->
    <section id="section3">
        <div class="text__effect1">
            <div>frontend</div>
            <div>devel</div>
        </div>
        <div class="text__effect2">
            <div class="left"><span>box1</span></div>
            <div class="right"><span>box2</span></div>
        </div>
        <div class="text__effect3">
            <div class="left"><span>box3</span></div>
            <div class="right"><span>box4</span></div>
        </div>
    </section> 
    <!-- //section3 -->
</main>
<!-- //main -->

폰트는 Saint Monica Regular를 다운받아 사용했습니다. 개인적으로 사용하면 무료이니, 이 폰트는 각자 해결하시면 될 것 같습니다. 이 폰트가 없어도, 다른 폰트를 사용하여도 무방합니다. 저는 폰트를 다운받어 woff2 파일로 변환하여, 웹 폰트로 사용하였습니다.

@font-face {
    font-family: 'Saint Monica Italic';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/SaintMonicaItalic.woff2') format('woff2');
    font-display: swap;
} 
@font-face {
    font-family: 'Saint Monica Regular';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/SaintMonicaRegular.woff2') format('woff2');
    font-display: swap;
} 
/* section1 */
#section1 {
    background: #EDF0ED;
    padding-top: 80px;
}
.text__effect1 {
    text-align: left;
    color: #2E3828;
    font-size: 19vw;
    line-height: 0.81;
    font-family: 'Saint Monica Regular';
    padding: 0 0 1vw 1vw;
    margin-top: 1vw;
    text-transform: uppercase;
    border-bottom: 1px solid #2e382848;
}
.text__effect2 {
    height: 50vh;
    border-bottom: 1px solid #2e382848;
    display: flex;
}
.text__effect2 .left {
    width: 30%;
    border-right: 1px solid #2e382848;
}
.text__effect2 .right {
    width: 70%;
}
.text__effect2 span {
    color: #2E3828;
    padding: 10px;
    font-family: 'Abel';
    display: inline-block;
}
.text__effect3 {
    height: 50vh;
    border-bottom: 1px solid #2e382848;
    display: flex;
}
.text__effect3 .left {
    width: 70%;
    border-right: 1px solid #2e382848;
}
.text__effect3 .right {
    width: 30%;
}
.text__effect3 span {
    color: #2E3828;
    padding: 10px;
    font-family: 'Abel';
    display: inline-block;
}

/* section2 */
#section2 {
    background: #2E3828;
}
#section2 h2 {
    color: #fff;
    font-size: 11vmax;
    line-height: 1;
    font-family: 'Saint Monica Regular';
    font-weight: normal;
    text-transform: capitalize;
    height: 30vh;
    padding: 5vh;
}
.hor__wrap {
    display: flex;
    flex-wrap: wrap;
    width: 420vw;
    height: 90vh;
}
.hor__wrap > div {
    width: 80vw;
    height: 90%;
    border: 1px solid #fff;
    margin-right: 1vw;
    margin-left: 1vw;
}
.hor__wrap > div span {
    padding: 10px;
    font-family: 'Abel';
    color: #fff;
    display: inline-block;
}

02. 스므스 효과 주기

스크롤시 부르러운 효과를 주기한 위한 작업을 할 것입니다. 보통은 스크롤시 부드럽다는 느낌을 받기 힘듭니다. 휠 마우스가 부드럽지 않으면, 더더욱 그렇구요! 그래서 사용자마다 다를 수는 있지만, 이 효과를 주고 안주고는 사이트 퀄리티에 큰 차이를 줄 수 있습니다. 또한 스므스 효과는 전체 소스를 절대값으로 잡고, transition 효과를 주는게 기본 원리이기 때문에, 사이트가 무거우면 오히려 역 효과를 낼 수 있습니다. 그래서 상황마다 적절하게 잘 쓰는게 중요합니다.

또한 스므스 효과를 줄 때 가장 중요한 점은 움직임을 어떻게 주느냐에 따라 부드러움을 표현 할 수 있습니다. 어떤 움직임을 주는 것은 정해져 있지 않습니다. 사용자마다 다를 수 있고 정답이 없습니다. 그래서 누군가 잘 만들어 놓은 것을 갔다 쓰는게 제일 좋은 방법 일 수 있습니다. 이번에는 lenis2 효과와 GSAP 효과를 같이 연동하여 사용할 것입니다. GSAP에도 스므스 효과는 있지만 유료이기에 무료인 lenis와 같이 사용해 보겠습니다. 이 효과를 잘 이용하면 여러분 사이트도 고급스럽게 만들 수 있습니다. 그럼 시작해보겠습니다. 🤪

lenis 깃헙 사이트에 가시면 소스를 다운 받아 볼 수 있으면, 기본 사용법도 참고 할 수 있습니다.

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

CDN을 연동하고 기본 소스를 넣으면 다음과 같지만, 필요 없는건 지워주겠습니다.

import Lenis from '@studio-freight/lenis'

const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    direction: 'vertical', // vertical, horizontal
    gestureDirection: 'vertical', // vertical, horizontal, both
    smooth: true,
    mouseMultiplier: 1,
    smoothTouch: false,
    touchMultiplier: 2,
    infinite: false,
})

//get scroll value
lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
    console.log({ scroll, limit, velocity, direction, progress })
})

function raf(time) {
    lenis.raf(time)
    requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

GSAP 스크롤 트리거를 쓸것이기 때문에 연동이 필요하고, 나머지는 동일합니다. 어떤가요? 조금 부드러워 졌나요? 😇 아직 느끼지 못하면 무엇인가 잘못된 부분이 있으니, 잘 살펴보세요!

gsap.registerPlugin(ScrollTrigger);

const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
})

function raf(time) {
    lenis.raf(time)
    requestAnimationFrame(raf)
}
requestAnimationFrame(raf)

03. 가로 모드 만들기

이제 GSAP를 통해 가로 모드로 만들어 보겠습니다. gsap.utils를 통해 가로 모드 자식들을 변수에 설정하였습니다. 해당 트리거가 hor__wrap을 인식하면 왼쪽으로 움직이도록 설정하였습니다. pin을 설정하여 해당 부분에 도착하면 고정시켰습니다. scrub 설정을 통해 스크롤에 반응하도록 하였으며, 시작값과 엔드값은 가로 모드 크키에 맞추어 설정하였습니다.

const horSection = gsap.utils.toArray('.hor__wrap .hor');

const horiz = gsap.to(horSection, {
    xPercent: -100 * (horSection.length - 1),
    ease: 'none',
    scrollTrigger: {
        trigger: '.hor__wrap',
        start: 'top 10%',
        end: '+=6000',
        pin: true,
        scrub: 1,
        markers: false,
    },
});

이렇게 하면 스므스 효과를 적용한 가로모드가 완성되었습니다. 여기에 반응형까지 신경을 쓰고, 내용물을 채우면 더 많은 버그가 발생하고, 신경써야 할 부분들이 생길 것입니다. 하지만 생각보다 가로모드가 간단하다는 걸 깨달았으면 좋겠네요!. 오늘 미션은 여기까지 입니다. 잘 따라하시분은 완성하여 링크 달아주세요! 잘 했는지 못했느지 평가해드릴께요! 🥹 수고하셨습니다.


HTML 레퍼런스

CSS 레퍼런스

자바스크립트 레퍼런스

사이트 레퍼런스


댓글0