MOTION & EFFECTS
홈페이지 움직임 · 효과 50가지
같은 디자인도 어떻게 움직이느냐에 따라 느낌이 확 달라져요.
카드를 누르면 바로 아래에 움직이는 견본이 열리고, 👆 표시가 있는 건 직접 눌러 보거나 마우스를 올려 볼 수 있어요.
마음에 드는 스타일 하나에 효과 몇 가지를 더하면, 우리 가게만의 홈페이지가 돼요.
※ 견본 속 가게 이름 · 후기 · 숫자는 효과를 보여 드리려고 지어낸 예시예요. 휴대폰에서는 기기에 맞게 가볍게 줄여서 넣어요.
스크롤하면 나타나기
글 · 사진이 화면에 들어올 때 · 10가지
스크롤 연출
깊이와 흐름을 만드는 · 10가지
계속 움직이는 분위기
가만히 있어도 살아 있는 · 10가지
마우스 · 손가락 반응
직접 만져 볼 수 있는 · 10가지
정보 보여 주기
편하게 보고 바로 연락하게 · 10가지
EFFECT 01
스르륵 떠오르기FADE UP
아래에서 살짝 떠오르며 나타나요
- 글 · 사진이 화면에 들어올 때 아래에서 스르륵
- 가장 기본이지만 있고 없고 차이가 커요
- 너무 크게 움직이면 어지러워요 (살짝이 좋아요)
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
새벽빵집
오늘 아침에
구운 빵
우유 식빵 · 하루 40개
EFFECT 02
한 줄씩 올라오는 글자LINE REVEAL
글자가 한 줄씩 아래에서 밀려 올라와요
- 줄마다 가려진 틀 안에서 글자가 올라와요
- 잡지 · 고급 브랜드 느낌의 첫 화면에 딱
- 긴 문단보다 짧은 제목에 써야 예뻐요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
SlowMorning,Good Coffee.
천천히 내린 커피 한 잔 · 필름커피
EFFECT 03
타자 치듯 글자TYPEWRITER
한 글자씩 타자 치듯 써져요
- 깜빡이는 커서와 함께 한 글자씩
- "뭐 찾으세요?" 같은 질문형 문구에 잘 어울려요
- 문장이 길면 기다리다 지쳐요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
우리 동네에서
필라테스 1:1 수업
찾고 계셨죠? · 유연필라테스
EFFECT 04
흐릿하다 선명하게BLUR IN
뿌옇던 글자가 초점이 맞듯 선명해져요
- 안개가 걷히듯 또렷해지는 등장
- 사진 위 큰 글자에 쓰면 영화 같아요
- 휴대폰에서는 살짝만 (무거울 수 있어요)
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
밤이 오면 불을 켜요
NIGHT LANTERN · 캠핑 랜턴
EFFECT 05
사진 커튼 걷기IMAGE REVEAL
사진을 덮은 막이 옆으로 걷히며 나타나요
- 색 막이 쓱 지나가며 사진이 드러나요
- 같은 사진도 훨씬 정성 들인 느낌
- 사진이 좋을수록 효과가 커요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
오늘 들어온
꽃으로 묶어요
EFFECT 06
숫자 올라가기COUNT UP
0부터 숫자가 착착 올라가요
- "23년 · 1,200명" 같은 숫자가 굴러 올라가요
- 숫자에 눈이 멈추고 믿음이 생겨요
- 꼭 실제 숫자만 (지어내면 안 돼요)
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
한자리에서
다녀간 손님 (예시)
별점 (예시)
EFFECT 07
차례로 등장STAGGER
카드가 하나씩 순서대로 나타나요
- 한꺼번에가 아니라 톡 · 톡 · 톡 차례로
- 목록이 많아도 정돈돼 보여요
- 간격은 0.1초 정도가 자연스러워요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
오늘의 메뉴
된장찌개9,000
제육 정식10,000
김치찌개9,000
솥밥11,000
EFFECT 08
확대되며 등장SCALE IN
작게 있다가 쑥 커지며 나타나요
- 중요한 하나를 크게 보여 줄 때
- 팝업 · 이벤트 배너에 쓰면 눈에 확
- 자주 쓰면 정신없어요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
벚꽃 케이크
오늘부터
3월 20일 ~ 4월 10일EFFECT 09
선 그리기LINE DRAW
선이 그려지듯 그림 · 아이콘이 나타나요
- 펜으로 그리듯 선이 쭉 이어져요
- 오시는 길 · 진행 순서에 쓰면 이해가 빨라요
- 그림은 단순할수록 예뻐요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
역 3번 출구에서 직진 → 두 번째 골목 → 오른쪽
EFFECT 10
형광펜 칠하기HIGHLIGHT
중요한 말에 형광펜이 쓱 칠해져요
- 읽는 순간 형광펜이 지나가요
- 꼭 기억해야 할 한마디에만
- 여러 군데 칠하면 효과가 없어요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
예약 없이 오셔도 되지만,
주말에는 예약하시면
기다리지 않아요
정직 세무회계 · 상담 예약 안내
EFFECT 11
패럴랙스PARALLAX
앞과 뒤가 다른 속도로 움직여 깊이가 생겨요
- 배경은 천천히, 앞 글자는 빠르게
- 평평한 화면에 입체감이 생겨요
- 휴대폰에선 약하게 (멀미 주의)
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
숲속 캠핑장
별 보러 오세요
EFFECT 12
멈춘 채 바뀌기STICKY SWAP
화면이 멈춘 채 사진과 글만 바뀌어요
- 스크롤해도 화면은 고정, 내용만 차례로 교체
- 세 가지 장점을 한 화면에서 보여 주기 좋아요
- 너무 길게 멈추면 답답해요
- 잘 어울리는 곳
- 조심할 점
- 무게 조금 무거움
01원두를 직접 볶아요
02빵은 아침마다 구워요
03케이크는 주문 받고 만들어요
EFFECT 13
카드 쌓이기STACKING CARDS
스크롤하면 카드가 한 장씩 올라와 앞 카드를 덮어요
- 카드가 차곡차곡 쌓이는 느낌
- 단계가 있는 내용(상담 → 시안 → 제작)에 딱
- 그릿워커스 홈페이지 제작 페이지에도 쓰였어요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
EFFECT 14
옆으로 넘어가기HORIZONTAL SCROLL
아래로 스크롤하면 옆으로 사진이 넘어가요
- 세로 스크롤이 가로 움직임으로 바뀌어요
- 사진 여러 장을 전시장처럼
- 휴대폰에선 손가락으로 넘기는 방식이 편해요
- 잘 어울리는 곳
- 조심할 점
- 무게 조금 무거움
객실 둘러보기 →
EFFECT 15
읽은 만큼 차는 막대PROGRESS BAR
맨 위 막대가 읽은 만큼 차올라요
- 어디까지 읽었는지 한눈에
- 긴 설명 페이지에서 끝까지 읽게 도와줘요
- 아주 가벼운 효과예요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
처음 오시는 분께
주차는 건물 뒤 공영주차장을 이용해 주세요.
첫 상담은 30분 정도 걸려요.
편한 옷을 입고 오시면 좋아요.
상담 후 원하실 때만 등록하시면 돼요.
EFFECT 16
스크롤 따라 커지는 사진SCROLL ZOOM
작은 사진이 스크롤하면 화면 가득 커져요
- 작은 창이 점점 커져 화면을 꽉 채워요
- "들어가 보는" 느낌을 줘요
- 사진 해상도가 높아야 해요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
집 같은 하루
EFFECT 17
스크롤 영상SCROLL VIDEO
스크롤하는 만큼 영상이 앞뒤로 감겨요
- 손가락으로 영상을 감는 느낌
- 그릿워커스 첫 화면 · 더비비스제주 사례에 쓰였어요
- 영상 준비와 용량 관리가 필요해 무거워요
- 잘 어울리는 곳
- 조심할 점
- 무게 무거움
창밖으로 해가 떠요 · 오션뷰 객실
EFFECT 18
색이 바뀌는 배경COLOR SHIFT
내려갈수록 배경색이 자연스럽게 바뀌어요
- 아침 → 낮 → 밤처럼 색이 이어져요
- 단락이 바뀌는 걸 색으로 알려 줘요
- 가볍고 우아한 효과
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
아침 7시
빵이 나와요
오후 2시
커피가 맛있어요
밤 9시
문을 닫아요
EFFECT 19
돌아가는 3D3D ROTATE
스크롤하면 물건이 입체로 돌아가요
- 제품을 360° 돌려 보여 줘요
- 눈길을 확 끄는 첫 화면
- 3D 모델 · 사진 준비가 필요해 무거워요
- 잘 어울리는 곳
- 조심할 점
- 무게 무거움
MOOD LAMP · 360°
EFFECT 20
커튼처럼 올라오는 다음 칸CURTAIN
다음 칸이 커튼처럼 위로 덮어 올라와요
- 첫 화면은 멈춰 있고 다음 칸이 덮어요
- 장이 바뀌는 느낌이 확실해요
- 그릿워커스 메인 첫 화면에 쓰였어요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
밤의 숲
도시에서 40분,
별이 보이는 캠핑장이에요.
EFFECT 21
흐르는 글자 띠MARQUEE
글자가 띠처럼 옆으로 끝없이 흘러요
- "오늘 휴무 · 신메뉴 출시" 같은 공지에 딱
- 힙하고 생동감 있는 느낌
- 속도가 빠르면 읽기 힘들어요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
MOVE
DANCE
EFFECT 22
끝없이 도는 후기 띠INFINITE CAROUSEL
후기 카드가 끝없이 천천히 흘러가요
- 멈추지 않고 천천히 흐르는 카드
- 후기가 많아 보이고 활기 있어 보여요
- 꼭 실제 후기만 (지어내면 안 돼요)
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
다녀간 분들 이야기 ※ 예시
★★★★★국물이 진하고 고기가 많아요30대 · 사진 후기
★★★★★제육이 불맛 나서 좋아요20대 · 사진 후기
★★★★★김치찌개 또 먹으러 올게요40대 · 사진 후기
★★★★★솥밥 누룽지가 최고예요30대 · 사진 후기
★★★★★국물이 진하고 고기가 많아요30대 · 사진 후기
★★★★★제육이 불맛 나서 좋아요20대 · 사진 후기
★★★★★김치찌개 또 먹으러 올게요40대 · 사진 후기
★★★★★솥밥 누룽지가 최고예요30대 · 사진 후기
EFFECT 23
천천히 확대되는 사진KEN BURNS
사진이 아주 천천히 다가오듯 커져요
- 사진 한 장인데 영상처럼 느껴져요
- 분위기 있는 가게 첫 화면에 최고
- 거의 무게가 없는 가벼운 효과
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
숯불 위에서
지글지글
EFFECT 24
흐르는 그라데이션ANIMATED GRADIENT
배경 색이 천천히 섞이며 흘러요
- 물감이 번지듯 색이 천천히 바뀌어요
- 사진 없이도 세련된 첫 화면
- 색을 2~3개로 줄여야 고급스러워요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
숨,
천천히
숨 요가 · 아침반 · 저녁반
EFFECT 25
떠다니는 도형FLOATING SHAPES
둥근 도형이 천천히 둥둥 떠다녀요
- 배경에 몽글몽글 떠다니는 모양
- 말랑하고 편안한 분위기
- 움직임은 느리고 작게
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
말랑
동물병원
무서워하지 않게, 천천히 진료해요
EFFECT 26
반짝 지나가는 빛SHINE
버튼 · 카드 위로 빛이 반짝 지나가요
- 유리에 햇빛이 스치듯 반짝
- "눌러 주세요" 버튼에 시선을 모아요
- 한 화면에 한 군데만
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
첫 방문 손님께
커트 20% 할인
지금 예약하기EFFECT 27
눈 · 꽃잎 내리기PARTICLES
눈이나 꽃잎이 화면 위로 내려와요
- 겨울엔 눈, 봄엔 벚꽃잎
- 계절 한정 메뉴 · 이벤트를 알릴 때
- 양을 적게 해야 정보가 가려지지 않아요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
겨울 한정
뱅쇼 시작
12월 1일 ~ 2월 말 · 창가 자리 예약 가능
EFFECT 28
물결WAVE
아래쪽에 물결이 잔잔하게 일렁여요
- 칸과 칸 사이를 물결 모양으로
- 시원하고 부드러운 느낌
- 움직임이 느려야 차분해요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
파도 소리 들리는
오션뷰 객실
EFFECT 29
배경 영상VIDEO BACKGROUND
첫 화면 뒤에 짧은 영상이 소리 없이 반복돼요
- 김 나는 커피, 반죽하는 손 같은 짧은 장면
- 사진보다 훨씬 생생해요
- 용량이 커서 휴대폰용은 따로 가볍게 만들어요
- 잘 어울리는 곳
- 조심할 점
- 무게 조금 무거움
● 영상천천히 내린
한 잔
메뉴 보기EFFECT 30
깜빡이는 네온NEON
밤거리 간판처럼 네온이 켜졌다 깜빡여요
- 간판에 불이 들어오듯 깜빡
- 밤 분위기를 확 살려요
- 계속 깜빡이면 눈이 피곤해요 (가끔만)
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
OPEN
달빛포차 · 저녁 6시 ~ 새벽 2시
EFFECT 31
꾹 눌리는 버튼PRESS
버튼을 누르면 진짜 눌린 듯 쑥 들어가요
- 눌렀다는 느낌이 손끝에 와요
- 휴대폰에서 특히 만족감이 커요
- 거의 무게가 없어요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
오늘의 밥상 · 화곡역 3분
버튼을 눌러 보세요
EFFECT 32
자석 버튼MAGNETIC
마우스가 다가가면 버튼이 끌려오듯 따라와요
- 버튼이 마우스 쪽으로 살짝 끌려와요
- 재미있고 세련된 느낌
- PC 전용 효과 (휴대폰에선 그냥 버튼)
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
함께 만들어요
문의하기 →마우스를 버튼 쪽으로 가져가 보세요
EFFECT 33
기울어지는 카드3D TILT
마우스 방향으로 카드가 입체로 기울어요
- 손에 든 카드를 돌려 보는 느낌
- 빛 반사까지 따라와 고급스러워요
- PC에서 효과가 커요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
카드 위에서 마우스를 움직여 보세요
EFFECT 34
마우스를 따라오는 빛SPOTLIGHT
어두운 화면에서 마우스 쪽만 환하게 비춰요
- 손전등을 비추듯 보고 싶은 곳만 환하게
- 숨은 그림 찾기 같은 재미
- PC 전용, 휴대폰에선 천천히 저절로 움직여요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
ROYAL HANWOO
마우스를 움직여 비춰 보세요
EFFECT 35
돋보기 확대HOVER ZOOM
사진에 올리면 그 부분이 크게 보여요
- 원단 · 질감 · 마감을 가까이서
- 매장에서 직접 보는 느낌
- 휴대폰에선 두 손가락 확대로 대신해요
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
울 30% · 촘촘한 짜임
사진 위에 올려 보세요사진 위에 마우스를 올려 보세요
EFFECT 36
뒤집히는 카드FLIP CARD
카드를 누르면 뒤집혀 뒷면 설명이 나와요
- 앞면은 사진, 뒷면은 설명
- 좁은 공간에 정보를 두 배로
- 눌러야 보인다는 걸 알려 줘야 해요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
우유 식빵우유 듬뿍 · 버터 · 국산 밀
아침 8시에 나와요
딸기 케이크생크림 · 제철 딸기
하루 전 예약
카드를 눌러 보세요
EFFECT 37
물결 퍼지는 클릭RIPPLE
누른 자리에서 동그란 물결이 퍼져요
- 어디를 눌렀는지 바로 보여요
- 앱처럼 반응이 빨라 보여요
- 가벼운 효과
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
시간을 골라 주세요
시간 버튼을 눌러 보세요
EFFECT 38
따라 움직이는 밑줄UNDERLINE SLIDE
메뉴에 올리면 밑줄이 미끄러지듯 따라가요
- 지금 어디를 가리키는지 부드럽게
- 깔끔한 홈페이지의 기본기
- 아주 가벼워요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
정직한 한 그릇
매일 아침 끓이는 국밥 · 정직국밥
메뉴에 마우스를 올려 보세요
EFFECT 39
비교 슬라이더BEFORE / AFTER
가운데 막대를 밀어 전과 후를 비교해요
- 손으로 밀어 보는 재미 + 확실한 비교
- 같은 장소 · 같은 각도 사진이 필요해요
- 의료 · 화장품은 법 기준에 맞게만
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
가운데 막대를 잡고 밀어 보세요
EFFECT 40
하트 톡 터지기LIKE BURST
하트를 누르면 톡 하고 터지며 숫자가 올라가요
- 누르는 순간 작은 불꽃이 톡
- 찜하기 · 관심 상품에 재미를 더해요
- 가벼운 효과
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
하트를 눌러 보세요
EFFECT 41
접었다 펴는 질문ACCORDION
질문을 누르면 답이 스르륵 펼쳐져요
- 길어질 질문 · 답을 깔끔하게 접어 둬요
- 휴대폰에서 특히 읽기 편해요
- 검색 · AI가 읽기 좋은 구성
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
자주 묻는 질문
주차 되나요?
건물 뒤 공영주차장, 2시간 무료예요.
예약 없이 가도 되나요?
평일은 괜찮아요. 주말은 예약하시면 기다리지 않아요.
카드 결제 되나요?
카드 · 계좌이체 · 간편결제 모두 돼요.
질문을 눌러 보세요
EFFECT 42
탭으로 바꿔 보기TABS
위 탭을 누르면 아래 내용만 바뀌어요
- 같은 자리에서 내용만 바꿔요
- 점심 · 저녁 메뉴처럼 나눠 보여 주기
- 탭은 3~5개가 적당해요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
탭을 눌러 보세요
EFFECT 43
넘겨 보는 갤러리SLIDER
사진을 옆으로 넘겨 가며 봐요
- 손가락으로 휙휙 넘기는 사진첩
- 사진이 많아도 한 칸에 담겨요
- 첫 사진이 제일 좋아야 해요 (뒤는 잘 안 봐요)
- 잘 어울리는 곳
- 조심할 점
- 무게 보통
화살표를 누르거나 옆으로 밀어 보세요
EFFECT 44
크게 보기 창LIGHTBOX
사진을 누르면 화면 가득 크게 열려요
- 작은 사진을 눌러 크게 보기
- 페이지를 떠나지 않고 바로 닫혀요
- 휴대폰에선 화면 가득 보여요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
사진을 눌러 보세요
EFFECT 45
아래 고정 버튼STICKY CTA
스크롤해도 전화 · 예약 버튼이 아래에 붙어 있어요
- 어디를 보든 버튼이 항상 손 닿는 곳에
- 전화 · 예약이 늘어나는 가장 확실한 장치
- 내용을 가리지 않게 얇게
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
숨 요가
아침 7시 · 저녁 8시 수업
1:1 체험 수업 있어요
매트 · 수건 준비돼 있어요
주차 2시간 무료
EFFECT 46
줄어드는 메뉴SHRINKING HEADER
내려가면 위 메뉴가 얇게 줄어들어요
- 처음엔 크게, 내려가면 작게 따라와요
- 내용을 넓게 보면서도 메뉴는 언제나
- 그릿워커스 홈페이지에도 쓰였어요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
굳은 어깨를 풀어 드려요
60분 · 90분 코스
첫 방문 상담 무료
EFFECT 47
톡 떨어지는 지도 핀MAP PIN
지도에 핀이 톡 떨어지며 위치를 알려요
- 핀이 떨어지고 동그란 파동이 퍼져요
- "여기예요!"가 한눈에
- 실제 지도 · 길찾기 버튼과 함께
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
건물 2층 · 주차 2시간 무료
길찾기EFFECT 48
날짜 고르기BOOKING PICKER
달력에서 날짜 · 시간을 눌러 바로 예약해요
- 고른 날짜가 톡 칠해지고 시간이 펼쳐져요
- 전화 없이 예약이 들어와요
- 실제 예약 연결은 따로 작업이 필요해요
- 잘 어울리는 곳
- 조심할 점
- 무게 조금 무거움
10월
시간 선택
11:0014:0016:3019:00 마감예약 요청 보내기날짜와 시간을 눌러 보세요
EFFECT 49
지금 영업 중 표시OPEN NOW
지금 시간에 맞춰 "영업 중"이 숨 쉬듯 깜빡여요
- 실제 시각을 보고 영업 중 · 준비 중을 자동으로
- "지금 가도 되나?" 고민을 바로 해결
- 휴무일 · 브레이크 타임까지 맞출 수 있어요
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
영업 중
오늘의 밥상
매일 11:00 – 21:00
브레이크 15:00 – 17:00 · 월요일 휴무
EFFECT 50
불러오는 중 뼈대SKELETON
내용이 뜨기 전 회색 뼈대가 반짝이며 기다려요
- 하얀 화면 대신 "곧 나와요" 뼈대
- 기다리는 시간이 짧게 느껴져요
- 인스타 연동처럼 늦게 오는 내용에 딱
- 잘 어울리는 곳
- 조심할 점
- 무게 가벼움
인스타 새 소식
벚꽃 케이크 시작!
오늘 식빵 나왔어요
새 원두 들어왔어요
마음에 드는 효과가 있으셨나요? 번호만 알려 주셔도 돼요.
이 효과로 상담하기 ↗