Skip to main content
SimilarExport ZIP
100%

scroll-unfixed

✓ Published0🌍 Public
11wheel
Last edited Sep 11, 2017
Created on Feb 14, 2017

This example demonstrates a scrollytelling technique using an internal scrolling container instead of fixing a graphic to the viewport. A large orange div with `overflowY: scroll` contains an SVG of randomly generated line paths, and as the user scrolls, each line’s opacity changes based on its associated scroll position. The visualization uses D3v4 for DOM manipulation and SVG generation, and listens to the container’s `scroll` event to update line opacity dynamically, with layout handled through simple inline styles.

AI-generated description

Using overflow-y instead of fixed for a scrolly graphic.

Similar vizzes

Loading thumbnail…

scrollytest1

This interactive scrollytelling visualization demonstrates the interplay between scrolling and data-driven graphics, built with D3 v4 and the graph-scroll library. The page uses a fixed-position chart that updates as the user scrolls through sections, with transitions between states driven by scroll position. The visualization leverages d3-dsv to parse tabular data, rendering it as an SVG/WebGL animation. As the user scrolls, the active section triggers changes in the displayed chart, creating a narrative flow. The design uses a clean, minimal aesthetic with the chart fixed on screen while text scrolls, and it supports both fixed and below-fold layouts for responsive storytelling.

335degrees
77% match
Loading thumbnail…

scrollytest6

This example, titled "scrollytest6," is an animated, scroll-driven data visualization that combines SVG and WebGL rendering within the D3.js framework. The visualization demonstrates a technique for synchronizing narrative content with user scrolling, likely transitioning between different chart states or datasets as the user progresses through the page. The visualization uses D3's data parsing capabilities (d3-dsv) and custom scroll-handling logic to create a dynamic, story-telling experience. The rendering is hybrid: SVG is used for crisp, interactive elements while WebGL handles performance-intensive graphics, with animations smoothly tying the scroll steps together. The example is part of a series of scroll-based experiments by the author 35degrees, building upon earlier iterations (scrollytest1-5) to refine the technique. The visualization is built with D3 and licensed under MIT.

335degrees
76% match
Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl
75% match
Loading thumbnail…

scrollytest3

This example demonstrates a scrolling narrative visualization built with D3.js, where user scroll progress drives animated transitions in an SVG/WebGL-rendered scene. The chart uses the `graph-scroll` library to bind scroll events to step-wise updates, likely revealing or transitioning between data states as the reader moves through the page. The visualization is generated from a Blockbuilder.org template and is part of a series of scrolling prototypes (scrollytest1/2), indicating iterative exploration of scroll-driven storytelling. Rendered with SVG and WebGL, it combines D3 v4 with jetpack utilities for concise coding. The MIT-licensed example shows how scrolling can act as an interactive narrative mechanism to sequence changes in the visualization.

335degrees
75% match
Loading thumbnail…

scrollytest3

This scrolling visualization demonstrates a step-through narrative experience where sections of text are fixed to the left while a graph animates on the right, guided by the user's scroll position. Built with D3 v4 and the d3-dsv module for data parsing, it uses the graph-scroll library to trigger animated transitions between steps as the reader scrolls. The SVG rendering includes smooth, state-driven updates, likely showing a dataset that changes or highlights different aspects with each section. The design focuses on storytelling with data, letting the scroll control the flow of the visualization.

335degrees
74% match
Loading thumbnail…

scrollytest2

scrollytest2 is a scrollytelling-driven data visualization that uses D3 v4 to animate SVG and WebGL graphics in response to page scrolling. The page embeds the graph-scroll.js library to tie scroll position to visualization state, creating an interactive, narrative flow. It is built with D3's dsv module for data loading and uses the jetpack helper for concise DOM manipulation. The visualization, authored by 35degrees and forked from an earlier scrollytest block, is rendered with a combination of SVG and WebGL to support smooth transitions and animated elements as the user scrolls.

335degrees
74% match
Loading thumbnail…

scrollytest5

This scrolling visualization demonstrates a scrollytelling narrative with an interactive SVG/WebGL canvas. It uses D3's dsv module to load and parse data, with sections of the page triggering graphical transitions as the user scrolls. The rendering combines SVG for crisp text and UI elements with WebGL for high-performance drawing of data points, while d3.graph-scroll.js coordinates the scroll events to update the visualization. The animation and scroll-driven interactivity are central to the piece, guiding the viewer through a structured, sequential exploration of the data. The example is built with Blockbuilder.org and is part of a series of experimental scroll-driven visualizations.This is a data visualization example titled **scrollytest5**, created by 35degrees. It is a scroll-driven (scrollytelling) visualization built with D3, using a combination of SVG and WebGL for rendering, with animation. It is part of a series of blocks exploring scroll-based interactions. The visualization uses D3 v4 and the d3-dsv module for data loading, and includes a custom graph-scroll helper for scroll-triggered animations. It is licensed under MIT. --- **Scrollytest5** is an interactive scrollytelling visualization from the D3 block gallery. It uses a scroll-driven narrative to guide viewers through a data story, with visual elements rendered in both SVG and WebGL and animated in response to scroll position. The project builds upon a series of earlier "scrollytest" experiments, iterating on scroll-based storytelling techniques. It leverages the D3.js library, specifically d3-dsv for data parsing, and includes a helper library (graph-scroll.js) to manage the scroll-triggered state changes. The example demonstrates how to create a seamless, engaging, scroll-driven data narrative within the D3.js ecosystem.Here is a concise description for the visualization gallery: This block, titled **scrollytest5**, is an interactive data-driven scrolling visualization. It uses the D3.js framework with SVG and WebGL rendering to create a scroll-driven narrative experience. The visualization leverages a graph-scroll library to animate and transition between different states or scenes as the user scrolls, building upon a series of earlier scrollytest iterations. Built with Blockbuilder.org, it is a part of the author's exploration of scroll-based storytelling with D3. The project is licensed under MIT.

335degrees
73% match
Loading thumbnail…

Scrolytelling the Penrose triangle

This interactive scrollytelling example uses a sticky visualization panel alongside scrolling text to show step-by-step instructions for drawing a Penrose triangle, then explores variations like resizing or distorting the shape. The animation is driven by a scroll-linked `refresh` function that sequences scenes via `onEnter`, `animate`, and `onExit` callbacks. To maintain consistent pacing across segments of varying lengths, the code maps vertical scroll position to a non-linear timeline using `d3.scaleLinear()` with extra intermediate domain-range pairs, as described in tonyhschu's scroll-linked demo. The final SVG is rendered and animated with D3 v5.

KKcnarf
71% match