무한 마키

고르는 곳 — 강점 목록 › 모양 «흐르는 줄»

쌓이는 카드

고르는 곳 — 강점 목록 › 모양 «쌓이는 카드»

스크롤 진행 바

고르는 곳 — 사이트 설정 › 레이아웃 «진행 바»(site.layout.progress)

화면 맨 위 상단바 밑줄 자리를 보십시오

읽은 만큼 막대가 찹니다. 이 예제 사이트 전체에 켜져 있습니다.

사진 호버 확대

고르는 곳 — 위젯 꾸미기 «마우스를 올리면 사진 확대»(mods.hoverzoom)

사진 마스크 펼침

고르는 곳 — 나타나는 방식 «사진이 펼쳐지며»(effect clip)

상단바 줄어들기 · 내리면 숨기

고르는 곳 — 사이트 설정 › 레이아웃 «상단바»(site.layout.navScroll = both)

스크롤을 내렸다가 올려 보십시오

내리면 상단바가 줄어들고 숨고, 올리면 다시 나옵니다.

페이지 넘김

고르는 곳 — 사이트 설정 › 움직임 «페이지 넘김»(site.motion.vt = fade)

링크 밑줄 그어지기

고르는 곳 — 사이트 설정 › 움직임 «링크 밑줄»(site.motion.uline)

글 속 링크에 마우스를 올려 보십시오

이 문장 안의 예시 링크 와 상단바 메뉴에 밑줄이 그어집니다.

롤링 글자 버튼

고르는 곳 — 사이트 설정 › 움직임 «버튼 글자 굴림»(site.motion.roll)

섹션 색 전환

고르는 곳 — 위젯 꾸미기 «스크롤 바탕색»(style.secolor)

바닥글 드러남

고르는 곳 — 사이트 설정 › 움직임 «바닥글 드러남»(site.motion.footreveal)

맨 아래까지 내려 보십시오

본문이 올라가며 뒤에 고정된 바닥글이 드러납니다.

카드 커서 조명

고르는 곳 — 위젯 꾸미기 «카드 조명»(mods.spot)

카드 3D 기울기

고르는 곳 — 위젯 꾸미기 «카드 기울기»(mods.tilt)

벤토 그리드 호버

고르는 곳 — 위젯 꾸미기 › 짜임 «벤토»(style.grid = bento)

격자 차례 등장 방향

고르는 곳 — 위젯 꾸미기 «차례 방향 — 가운데서»(mods.stagdir)

날아들고 빠지는 목록

고르는 곳 — 위젯 꾸미기 «나갈 때도 움직이기»(mods.flyout)

텍스트 스크램블

고르는 곳 — 나타나는 방식 «글자 풀며»(effect scramble)

무작위 글자가 제 글자로 풀립니다

타자기

고르는 곳 — 대문 › 모양 «타이포 전면» › 세부 «타자기»(detail.typer)

노이즈 · 그레인 질감

고르는 곳 — 테마 › 배경 패턴 «필름 입자»(grain)

움직이는 메시 배경

고르는 곳 — 테마 › 배경 패턴 «여러 빛 — 천천히 움직임»(mesh-move)

맨 위 대문 · 33번 대문의 배경을 보십시오

천천히 움직이는 빛이 깔려 있습니다(배경 패턴은 «로고» · «스크롤 확대» 대문 모양에서 보입니다).

보더 빔

고르는 곳 — 위젯 꾸미기 › 모양 «테두리 빛 — 도는 빛»(style.edge = beam)

원뿔 그라디언트 포인터

고르는 곳 — 위젯 꾸미기 › 모양 «테두리 빛 — 커서 쪽 빛»(style.edge = conic)

카드 뒤집기

고르는 곳 — 강점 목록 › 모양 «뒤집는 카드»

스크롤 그림자

고르는 곳 — 사이트 설정 › 움직임 «넘치는 줄 그림자»(site.motion.sshadow)

CSS 캐러셀 점 · 버튼

고르는 곳 — 사이트 설정 › 움직임 «캐러셀 점»(site.motion.cmark)

게시판의 가로 줄이 있어야 보입니다 — 지금은 안내만

캐러셀 점은 게시판 목록의 가로 줄(gl-rail)에 붙습니다. 이 예제는 서버 없이 도는 정적 파일이라 게시판 글을 받아 올 수 없어 가로 줄이 생기지 않습니다. 설정은 켜 두었습니다(크롬 135 이상).

스켈레톤 반짝임

고르는 곳 — 사이트 설정 › 움직임 «불러오는 동안»(site.motion.skel = shimmer)

누름 리플

고르는 곳 — 사이트 설정 › 움직임 «버튼 누름»(site.motion.ripple)

물결 글자

고르는 곳 — 나타나는 방식 «물결치며»(effect wave)

글자가 한 번 출렁이며 나타납니다

스크롤 따라 글 채우기

고르는 곳 — 한 문장 › 모양 «스크롤 따라 채우기»(fill)

숫자 롤링(오도미터)

고르는 곳 — 숫자 세기 › 모양 «숫자 굴림»(odo)

선 그리기(연혁 · 과정)

고르는 곳 — 강점 목록 › 모양 «선 잇기»(draw)

핀 고정 가로 스크롤

고르는 곳 — 핀 고정 › 모양 «가로 스크롤»(hscroll)

스크롤 연동 확대 대문

고르는 곳 — 대문 › 모양 «스크롤 확대 대문»(zoomhero)

카드가 커져 상세로

고르는 곳 — 사이트 설정 › 움직임 «카드 → 상세»(site.motion.vtshare)

게시판 목록 · 글 상세가 있어야 보입니다 — 지금은 안내만

이 효과는 게시판 목록 카드의 사진과 글 상세 화면의 첫 사진을 이어 그립니다. 둘 다 서버에서 글을 받아 그리므로, 서버 없는 이 정적 예제에서는 짝이 생기지 않습니다. 설정은 켜 두었습니다 — 화면 넘김(7번)은 그대로 돕니다.

풀스크린 메뉴 오버레이

고르는 곳 — 사이트 설정 › 움직임 «전체 화면 메뉴»(site.motion.navfull)

상단바의 세 줄 버튼을 눌러 보십시오

메뉴가 화면 전체를 덮으며 열립니다. Esc 로 닫힙니다.

화면 커튼 전환

고르는 곳 — 사이트 설정 › 움직임 «페이지 넘김 — 커튼»(site.motion.vt = wipe · iris · blinds)

마그네틱 버튼

고르는 곳 — 사이트 설정 › 움직임 «버튼 끌림»(site.motion.magnet)

스크롤 속도 반응 마키

고르는 곳 — 흐르는 줄 › 세부 «스크롤에 반응»(detail.scroll = velocity)

3D 회전 캐러셀

고르는 곳 — 강점 목록 › 모양 «돌리는 링»(ring)

넘기는 카드 묶음

고르는 곳 — 강점 목록 › 모양 «넘기는 카드»(swipe)

곡선 따라 흐르는 글

고르는 곳 — 대문 › 모양 «타이포 전면» › 세부 «도장 글»(detail.textpath)

아이콘 모프

고르는 곳 — 사이트 설정 › 움직임 «메뉴 아이콘 바뀜»(site.motion.morph)

상단바의 세 줄 버튼을 눌러 보십시오

세 줄이 X 로 바뀌고, 닫으면 돌아옵니다.

흩어졌다 모이는 글자

고르는 곳 — 나타나는 방식 «흩어졌다 모이며»(effect scatter)

흩어진 글자가 제자리로 모입니다

역방향 스크롤 기둥

고르는 곳 — 강점 목록 › 모양 «엇갈려 흐르는 기둥»(revcol)

굵기 변하는 글자

고르는 곳 — 위젯 꾸미기 «굵기 변하는 글자»(mods.wght)

가변 글꼴 필요 — 지금은 꺼짐

이 꾸미기는 사이트에 «가변 글꼴»(굵기 범위가 있는 글꼴)을 더했을 때만 켜집니다. 지금 저장소에는 가변 글꼴 파일이 없어 엔진이 표시 자체를 내지 않습니다.

커서 추종 · 호버 미리보기

고르는 곳 — 위젯 꾸미기 «올리면 사진 미리보기»(mods.hoverpv)

게시판 글이 있어야 보입니다 — 지금은 안내만

사례 목록 · 소식 목록 · 게시판의 글에 마우스를 올리면 그 글의 대표 사진이 커서 옆에 뜹니다. 글은 서버에서 받아 그리므로, 서버 없는 이 정적 예제에서는 보여 드릴 글이 없습니다.

이미지 트레일

고르는 곳 — 대문 꾸미기 «커서 따라 사진 자국»(mods.trail)

리퀴드 버튼 호버

고르는 곳 — 사이트 설정 › 움직임 «버튼 물들기»(site.motion.liquid)