$ show Prinzhorn/skrollr
skrollr is a standalone, zero-dependency JavaScript library for creating parallax scrolling effects and scroll-driven animations. It operates by reading HTML5 `data-` attributes on elements to define keyframes (sets of CSS property values) at specific scroll positions, then interpolates between them as the user scrolls. The library supports both absolute mode (keyframes tied to document scroll offset) and relative mode (keyframes triggered by element position relative to the viewport), along with per-property easing functions, constants, and percentage-based offsets. It handles vendor prefixes automatically and includes a custom mobile mode that replaces native scrolling with CSS transforms for touch devices. The core rendering loop uses requestAnimationFrame, and the library exposes a clean public API for programmatic control (scroll, animate, refresh, destroy). Despite being feature-rich and well-documented, the codebase has not been actively maintained since 2014, relies on outdated build tools (Grunt, Node 0.10), and contains legacy patterns (e.g., user-agent sniffing for mobile detection). Its architecture is a single-file singleton with internal state, making it straightforward to use but harder to integrate with modern module systems without the provided AMD/CommonJS shims.
The LLM identified 2 files worth highlighting for reuse:
The entire library in a single file. It implements a singleton pattern (`skrollr.get()` and `skrollr.init()`), parses data-attribute keyframes, interpolates numeric CSS values, applies styles with vendor prefixes, and handles mobile scrolling via touch events. The `skrollr.setStyle` static method is a reusable cross-browser CSS property setter that handles vendor prefixes, z-index coercion, and float property normalization. The `easings` object provides a collection of pure easing functions (linear, bounce, swing, etc.) that can be extracted and used independently. The `_parseProp` function demonstrates a clever regex-based approach to extract numbers from CSS values and create a format string for interpolation.
A small, self-contained QUnit extension that adds a `numericCSSPropertyEquals` assertion method. It extracts all numeric values from CSS property strings and compares them with a tolerance (0.01 for floats, 1 for integers). This is a reusable test utility for any project that needs to verify computed CSS property values without exact string matching, especially useful for animation libraries where floating-point rounding occurs.