3D数字展厅
滚动驱动 3D 立方体旋转艺术展厅卡片轮播交互动效（CSS+JS）这是一款基于 CSS 3D+JavaScript 实现的滚动驱动 3D 立方体旋转艺术展示效果。它通过页面滚动触发立方体完成顺滑的 3D 旋转，六个展示面可承载不同艺术作品（图片或卡片）与配套内...
多列图片无限滚动
Three.js WebGL 反向滚动多列图片墙动效，沉浸式滚动驱动拼贴画交互效果这是一款多列反向滚动沉浸式图片拼贴画交互效果，基于 Three.js WebGL 技术实现，支持 5 组独立图片带的差异化滚动控制，可实现正反交替的滚动方向、自定义曲率与旋转角度，搭配垂直无限循...
滚动切换
WebGL 滚动驱动三维场景切换效果——五段几何形态无缝过渡实现方案这是一款基于 WebGL + SDF 光线步进技术实现的滚动联动三维渲染效果。页面滚动即驱动场景演进，依次呈现球体、圆环、立方体、八面体、双环五种几何形态，形态之间连续融合过渡，没有跳切感。配色...
过年歌轮播
滚动居中放大预览卡片，CSS 原生滚动驱动卡片轮播动画这是一款基于 CSS animation-timeline: scroll() 实现的滚动缩放效果。页面初始呈现一排等大的深色卡片，随着用户向下滚动，位于中心的卡片会逐渐放大并高亮为蓝色，两侧卡...
环形图库
基于 CSS Scroll-Timeline 打造的环形聚焦滚动画廊这是一款打破线性维度的环形滚动画廊，基于主流的 CSS 滚动驱动动画（Scroll-driven Animations） 技术实现。它彻底抛弃了传统的“水平”或“垂直”滑动逻辑，通过 anima...
视差剧场
基于滚动驱动的 CSS 粘性图文沉浸式浏览“切割过渡”效果这是一款极具叙事感的滚动粘性图片交互效果，基于纯 CSS (Position Sticky) 技术实现。它彻底改写了传统网页“图文并排”的单调感，通过将图片锁定在视窗的一侧，使其随着用户的滚动操...
轨迹之美
基于 GSAP 打造的滚动驱动可视化曲线路径调试器这是一款交互式可视化路径调试器，基于 GSAP + ScrollTrigger + MotionPathPlugin 优质动效库组合实现。它最惊艳的地方在于将网页中原本“肉眼不可见”的滚动轨迹彻...
穿梭视界
基于 CSS 3D 实现的沉浸式纵深滚动卡片特效这是一款极具纵深感的 3D 视差滚动卡片效果，基于 CSS 3D 变换与滚动驱动动画（Scroll-driven Animation）技术实现。它将传统的平面展示空间彻底立体化，让卡片随着用户的...
动态曲线轴
纯 CSS 鼠标滚动驱动线条轨迹绘制动画特效，用CSS打造动态路径引导效果这是一款基于鼠标滚动或者滑动页面驱动的线条轨迹绘制动画效果，基于纯 CSS keyframes结合animation动画技术实现，随着页面滚动，红色节点会沿预设的曲线轨迹移动，同时同步绘制出对应...
滚动切换图片
CSS 滚动驱动多阶段照片比较组件：自动适配层的分阶段内容展示工具，让图像叙事更智能流畅这是一款基于 CSS 滚动驱动多阶段图像比较效果，基于 CSS scroll-timeline+animation-range+JS 技术实现 —— 它靠滚动位置来驱动多阶段的图像对比，利用图片...
步行者
GSAP滚动驱动步行动画，适用于作品集个性展示或互动叙事网站等需要表现人物动态的场景这是一款基于滚动触发的步行动画效果，采用GSAP ScrollTrigger技术驱动逐帧动画，将传统影视 walk cycle 原理移植到网页滚动交互中，适用于作品集个性展示、角色介绍页面或互动...
星系运转
HTML+CSS鼠标滚动驱动太阳、地球、月球相互转动动画源码这是一款银河轨道滚动动效，基于CSS Scroll-Driven Animations技术实现，通过页面滚动驱动星体（太阳、地球与月球）轨道旋转动画，适用于天文科普或科幻主题网页场景