가로 모드 스므스 효과 만들기
소개
안녕하세요🤭 이번에는 가로모드를 만들어 보겠습니다. 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 레퍼런스
- font-family
- font-weight
- font-style
- font-display
- margin
- padding
- list-style
- text-decoration
- position
- left
- bottom
- width
- height
- backdrop-filter
- display
- justify-content
- align-items
- text-transform
- color
- background
- flex-wrap
- flex-wrap
댓글1