sveltejs/svelte-scroller

svelte-scroller is a component for Svelte apps that lets you create scroll-based visual effects on a webpage. It gives you a background layer that stays fixed in place while a foreground layer of content scrolls over it, similar to how a video game character moves across a static landscape. This is a popular design pattern for storytelling websites, product pages, and any experience where you want content to unfold as the user scrolls. The component works by stacking two layers: a background and a foreground. The foreground contains individual sections of content that scroll normally. Meanwhile, the background stays pinned to the screen until the user scrolls past it, at which point it unpins and scrolls away. You can control exactly when the background locks and unlocks by setting proportional window-height markers for the top and bottom of the scroll area. There is also a parallax option that makes the background scroll at a different speed than the foreground, though the project cautions that this effect can be uncomfortable for people sensitive to motion. As the user scrolls, the component keeps track of useful information. It knows which section of the foreground is currently active, how far that section has scrolled past a set threshold, and the overall progress of the foreground from top to bottom. You can use these numbers to trigger animations, update highlighted navigation links, or change what the background displays section by section. This tool is built specifically for Svelte, a frontend web framework, so it is meant for developers already working within that ecosystem. A designer building an interactive product walkthrough, for instance, could use it to keep a product image stationary in the background while feature descriptions scroll past in the foreground. The component is straightforward to drop in and configure, making it a practical choice for adding polished scroll interactions without building the underlying scroll-tracking logic from scratch.