Scroll snapping, state queries, monster hunter, and gamification
10 months ago
- #JavaScript
- #UI Design
- #CSS
- The article discusses recreating a UI from Monster Hunter games using CSS and JavaScript.
- Key features include horizontal scrolling, draggable elements, and gamification of a select element.
- HTML structure includes a custom select with options, a frame, and scroll arrows for navigation.
- CSS setup involves anchor positioning, scroll-snap, and custom styling for options and frame.
- JavaScript handles drag behavior, arrow key navigation, and scroll-snap events for item selection.
- Accessibility concerns are noted, emphasizing context and user expectations.
- The demo showcases creative use of new CSS features but advises caution for typical web forms.