Sticky Story Section — mcpskills.net

Create a sticky story section. On the left, a large image or placeholder block should stick to the viewport while the user scrolls. On the right, 3-4 text chapters scroll by, each with a small chapter label, bold headline, and short paragraph. As each chapter reaches the center, the sticky image subtly crossfades or changes color. Use CSS sticky and scroll-driven classes. Use Tailwind CSS.

创建一个粘性故事区域。左侧大图或占位块在用户滚动时粘在视口。右侧 3-4 个文本章节滚动经过，每个章节包含小标签、粗体标题和短段落。当每个章节到达中心时，粘性图片微妙交叉淡入或变色。使用 CSS sticky 和滚动驱动类。使用 Tailwind CSS。

## Overview A scroll-driven narrative layout that pairs stable visuals with progressing text. Common in editorial and product storytelling. ## Features - Sticky image on left - Scrolling text chapters on right - Chapter labels + headlines - Crossfade/color change on chapter transition - CSS sticky positioning - Scroll-driven state changes ## Usage Use for product stories, case studies, tutorials, or brand manifestos. ## Customization Modify the prompt to: - Swap image and text sides - Add progress dots for chapters - Use video instead of image - Animate text with blur reveals