Update: created video-scroll/video-triggered-wp2-text-over-video-title-page.html - added landing section and 200vh theme layout with sticky 2x2 video grid; ensured background video-section videos continue playing while interacting/scrolling text and video areas (2025-11-12)
Key Features:
county_moi.jsond3.geoMercator() for accurate Taiwan map projectiongetBBox()Technologies:
Key Features:
map.flyTo() transitions when scrolling to city sectionsTechnologies:
Key Features:
Technologies:
Comparison:
Key Features:
Key Features:
Key Features:
position: sticky.Key Features:
data-x, data-y, and data-scale attributes to define viewports.Key Features:
Key Features:
translateY transformation on content layersTechnologies:
Key Features:
perspective methodtranslateZ(-1px) for background depthscale(2) compensation for perspective scalingTechnologies:
perspective: 1px for depth effecttransform-style: preserve-3dtranslateZ)Comparison:
Key Features:
Technologies:
Key Features:
Technologies:
scrollIntoView for navigationKey Features:
IntersectionObserver for efficient scroll detection.Technologies:
IntersectionObserver APIopacity, transform)Key Features:
threshold and rootMargin.rootMargin as a dashed box overlay.IntersectionObserver triggers based on scroll position and margin settings.Technologies:
IntersectionObserver APIKey Features:
position: sticky to keep the visual area fixed while scrolling.mix-blend-mode: screen to create a see-through text effect where black text reveals the background image.Technologies:
mix-blend-modeposition: stickyKey Features:
Technologies:
rotateY, perspective)IntersectionObserver with rootMargin for precise top-border triggering.Key Features:
globe.gl, featuring realistic textures (Blue Marble, Topology, Night Sky).Technologies:
globe.gl (Three.js wrapper)Key Features:
Technologies:
globe.glLast updated: 2025-12-02