Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sample_Leaflet_scrollytelling

Public visualization

Viewing a saved revision (read-only)

dac2c901b8194d7d940b8d1daa328884

Sample_Leaflet_scrollytelling

0 stars1🌍 Public
FFrancesco Di Filippo
Last edited Mar 9, 2024
Created on Mar 9, 2024

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.