▲

스크롤 시 페이지를 따라 내려가는 Scroll Bar Buddy 개발

 (focusfurnace.com)
1P by GN⁺ 1달전 | ★ favorite | 댓글 1개

  • Scroll Buddy 소개

    • 스크롤 바를 재미있게 바꾸기 위해 애니메이션 스틱 피규어를 추가한 프로젝트임
    • 스크롤할 때 페이지 옆에서 위아래로 움직이는 스틱 피규어를 볼 수 있음
    • 향후 스케이트보더, 암벽 등반가, 다람쥐 등 다양한 버전을 계획 중임

  • 주의 사항

    • 페이지 측면에 포함된 예제 애니메이션이 일부 독자에게 문제를 일으킬 수 있음
    • 전정 운동 장애가 있는 독자는 애니메이션을 보기 전에 기기에서 모션 감소 기능을 활성화하는 것이 좋음
    • 모션 감소 설정이 켜져 있으면 대부분의 브라우저에서 Scroll Buddy가 숨겨짐

  • 기타 정보

    • 이 프로젝트는 간단한 자바스크립트로 만들어졌음
    • 스크롤 바를 더욱 흥미롭게 만들기 위한 아이디어를 제안받고 있음

  • 기타 내용

    • 나머지 텍스트는 스크롤을 위한 더미 텍스트로, 실제 내용과 관련이 없음
▲
GN⁺ 1달전  [-]
Hacker News 의견
  • 재미있음. 코딩하지 않은 아이디어가 있었음. 기본적으로 낙하산을 가진 햄스터가 페이지 하단으로 천천히 떨어지는 것임
    • 빠르게 스크롤하면 낙하산이 펼쳐져서 뷰포트 하단에 다시 착륙함
    • 마우스를 올리면 "Top" 표지판을 들고 클릭하면 제트팩으로 날아가며 화면이 맨 위에 도달하면 다시 낙하산을 펼쳐 화면 하단에 부드럽게 착륙함
  • 왜 아무도 이것을 'Stroll Bar'라고 부르지 않았는지 궁금함
  • 사용자가 prefers-reduced-motion 설정을 했을 때는 이런 기능을 비활성화해야 함
    • 추가적인 CSS 규칙이 필요함
    • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
  • 지루한 스크롤바 대신 애니메이션 스틱 피규어가 페이지 옆에서 위아래로 걷는 것이 재미있을 것 같음
    • 첫 번째 프로토타입을 만들었음
    • 다음에는 스케이트보더, 암벽 등반가, 다람쥐를 만들 예정임
    • 다른 스크롤 친구로 무엇을 만들면 좋을지 궁금함
  • 왜 구현을 Google Form 뒤에 숨기는지 궁금함
    • 구현 세부사항은 DOM에서 쉽게 접근 가능함
    • 이메일을 제공하지 않고도 관련 세부사항을 추출할 수 있는 gist를 공유함
  • Google Form 뒤에 있는 이유가 궁금함. 이메일 주소를 수집하기 전에 어떻게 생겼는지 스크린샷조차 없음. 이상한 게시물이 메인 페이지에 올라옴
  • 90년대 후반 사람들이 웹사이트에 눈이나 마우스를 따라다니는 불꽃 효과를 추가하던 시절이 생각남
  • 무엇을 놓치고 있는지 모르겠음. Firefox와 Chrome에서 스크롤바 자체 외에는 아무것도 보이지 않음. 사용자 정의 스크롤바 색상이 관련이 있는지 궁금함
  • 이런 프로젝트는 옛날 인터넷을 떠올리게 함. 좋아함
  • 기존 스크롤바가 얼마나 쓸모없고 사용하기 어려운지를 강조함
    • 페이지에서 어디에 있었는지를 쉽게 볼 수 있는 기능이 좋았음. 유머도 있음. 좋아함
답변달기