자바스크립트 없이 움직이는 카운터

여기 카운터 디자인 가운데 꽤 여럿이 움직입니다. 숫자가 스스로 올라가거나, 패널이 스스로 그려지거나, 무언가가 떨어져 자리를 잡습니다.

그 가운데 어느 것도 자바스크립트를 한 줄도 쓰지 않습니다.

어떻게 되는가

카운터는 SVG이고, SVG는 자기 스타일시트를 지닐 수 있습니다. 움직임은 그림 안에 쓰인 CSS 키프레임이므로, 전체가 한 파일로 한 번의 요청에 도착해 스스로 움직이기 시작합니다. 브라우저는 그것을 다른 CSS 애니메이션과 똑같이 다룹니다. 스크립트를 깨우지 않고 합성기에서 처리합니다.

실질적인 결과는 움직이는 카운터가 멈춘 카운터와 같은 값을 치른다는 것입니다. 대략 1.8KB에서 3.2KB 사이입니다. 라이브러리도, 두 번째 요청도, 불러오는 동안 페이지의 나머지를 막는 것도 없습니다.

움직임의 종류

생김새가 아니라 어떻게 움직이는지로 묶었습니다. 실제로 선택이 갈리는 지점이 그쪽이기 때문입니다:

• 쌓아 올리기 — 카운터가 획 하나씩 스스로를 그려 냅니다.
• 무게를 지니고 — 무언가가 떨어지고, 튀고, 가라앉습니다. 관성이 있는 움직임입니다.
• 미래풍, 움직임과 함께 — 빛, 주사선, 흐르는 안개. 셋 가운데 가장 화려합니다.

그 분위기는 원하지만 움직임은 원하지 않을 때를 위한 잔잔한 미래풍 가족도 있습니다. 이 글을 쓰는 시점에 제공되는 디자인 가운데 쉰여덟 가지가 움직이며, 누가 애초에 만들려던 것보다 훨씬 많습니다.

방문자가 움직임을 줄여 달라고 했을 때

운영체제에는 애니메이션을 줄이는 설정이 있습니다. 사람들은 움직임에 민감해서, 전정기관 질환 때문에, 편두통 때문에, 그리고 때로는 그저 페이지에서 움직이는 것이 지치게 해서 그것을 켭니다. 브라우저는 그 선호를 모든 페이지에 전합니다.

이 카운터들은 그것을 존중합니다. 방문자가 시스템에 움직임을 줄여 달라고 해 두었다면 애니메이션은 돌지 않고, 같은 숫자를 담은 멈춘 카운터를 받습니다. 이 글을 쓰며 디자인마다 확인했고, 짐작하지 않았습니다.

그것을 지키는 데 스타일시트 한 줄이 들고, 그것이 장식과 성가심을 가르는 차이입니다.

그것을 쓰지 말라는 한마디

움직임은 눈을 끕니다. 그것이 움직임의 목적 전부이고, 동시에 절제해야 할 이유입니다.

카운터가 페이지의 주제가 아니라면 — 대부분의 페이지에서 그렇지 않습니다 — 구석에서 움직이는 것은 방문자의 주의를 두고 진짜 내용과 겨루게 되고, 그 주의야말로 페이지의 목적이었습니다. 멈춘 카운터는 같은 숫자를 아무것도 요구하지 않고 말합니다.

움직이는 것은 카운터가 페이지의 성격에 속하는 곳에 쓰십시오. 개인 사이트, 프로젝트 페이지, 약간의 연출이 어울리는 곳 말입니다. 누군가 읽으려는 페이지에서는 가만히 있는 것을 고르십시오.