DOM 요소를 지형 삼아 걷는 레밍스, CSS 애니메이션만으로 구현돼 해커뉴스 화제
- CSS 애니메이션만으로 웹페이지의 DOM 요소를 지형으로 삼아 걷는 레밍스 캐릭터를 구현한 실험 페이지임. 버튼이나
__walker.add()로 캐릭터를 소환하고, 드래그해 들어 옮기거나 튕겨 던질 수 있음. - 테두리, 박스, 버튼, 이미지, 입력 필드는 단단한 바닥이고 텍스트는 밟을 수 있지만 통과되는 바닥임. 줄 간격이 캐릭터 키보다 좁아서 문단 두 줄 사이에 끼이는 일이 없음.
- 창 크기를 바꾸면 캐릭터가 발밑 표면을 타고 이동하고, 빠르게 리사이즈하면 그대로 튕겨 발사됨. 카드가 좁은 화면에서 줄바꿈으로 재배치될 때 위에 서 있던 캐릭터도 함께 밀려남.
- 해커뉴스 댓글에서 모바일 확대 버그를 지적하며
html { overflow-x: clip; touch-action: manipulation; }를 제안했고 작성자가 반영하겠다고 답함. - 파기, 계단 쌓기, 낙하산 같은 요소가 없어 이름만 레밍스라는 지적이 나왔고, 댓글에서는 xpenguins 웹 포팅, dhtml lemmings, 맥용 레밍스 포팅 프로젝트 같은 관련 작업이 공유됨.
Hacker News opinions
Psygnosis는 퍼블리셔고 개발은 DMA Design이 했음. 그랜드 테프트 오토 만든 팀이라니까 납득감.
나도 사이트에 비슷한 걸 붙였는데, 헥사곤 클릭하면 로봇이 SLAM 매핑하면서 텍스트 요소 피해다니게 했음. 개별 문자 블록 크기 딱 맞추는 게 제일 어려울 줄 알았는데 의외로 쉬워서 놀랐음.
로봇이 지나간 경로를 베이스 플레이트가 불 켜서 보여주는 디테일 좋더라. 사이트도 인상적이었음.
모바일에서 줌 버그 몇 개 있음. html { overflow-x: clip; touch-action: manipulation; } 넣으면 고쳐질 거임.
오 고마워, 바로 추가할게.
예전에 html5lemmings라는 사이트에서 몇 레벨 플레이할 수 있었는데, 서버 렌더링 위주에 JS는 최소였던 시절이라 꽤 인상적이었음. dhtml lemmings는 elizium.nu/scripts/lemmings/에 아직 있음.
캐릭터를 화면 하단 여백 왼쪽이나 오른쪽에 놓고 스크롤 내리면 곤두박질치고, 다시 올리면 트램폴린처럼 튕겨서 존나 웃김.
Safari에서는 스크롤을 따라오지 않음.
지형 배치 때문에 레밍이 옆으로 그냥 화면 끝까지 떨어져버림. body 패딩 빼고 구덩이를 더 넣으면 훨씬 나을 듯.
나도 같은 생각임. 위에서 떨어진 레밍이 모든 층을 통과해야 바닥에 닿게 만들면 좋겠음.
첫 문단에 드래그해서 들어 옮길 수 있다고 써 있으니 원하는 위치에 놓고 상호작용을 테스트하면 됨. 스크롤에 맞춰 리스폰해주거나 타이머로 리셋해주는 것 말고는 더 나은 시연 방법이 없을 듯.
xpenguins를 웹으로 포팅해서 북마클릿으로 아무 사이트에서나 돌아가게 했음. 레밍스는 없고 짝퉁 펭귄만 있음. prefers reduced motion 켜둔 사람은 아무것도 안 보인다는 점 참고해줘.
50개 넘게 소환해도 부드럽게 돌아감. 틱 레이트가 높지 않아서 수천 개도 가능할 거라고 작성자가 답했음.
캐릭터들이 실제로 걷는 것처럼 보이진 않음. 크롬이랑 파이어폭스에서는 되는데 리눅스 Edge에서는 왜인지 안 됨.
파기나 계단 쌓기, 낙하산이 없으면 이름만 레밍스고 정신은 아님. 폭발은 CSS 애니메이션으로도 충분히 가능할 텐데.
어릴 때 아빠랑 이 게임을 수십 시간 했는데, 떨어져 죽을 때 소리까지 넣었으면 병원 실려갔을지도. 스프라이트를 원작에서 가져왔다니 낙하산이나 죽음 애니메이션 넣으면 웹 분석 숫자도 올라가겠음.
1991년 아미가로 동생이랑 레밍스 미친 듯이 했음. 영어 못 하는 동생이 죽는 레밍의 'oh, nooooo'를 흉내 내던 게 아직도 기억남. 삼십 년 넘게 동생 별명이 'Lem'이고 회사 이름도 비슷하게 지었음.