基于滚动驱动的 CSS 粘性图文沉浸式浏览“切割过渡”效果

视差剧场

基于滚动驱动的 CSS 粘性图文沉浸式浏览“切割过渡”效果

这是一款极具叙事感的滚动粘性图片交互效果,基于纯 CSS (Position Sticky) 技术实现。它彻底改写了传统网页“图文并排”的单调感,通过将图片锁定在视窗的一侧,使其随着用户的滚动操...

基于 CSS 3D 实现的沉浸式纵深滚动卡片特效

穿梭视界

基于 CSS 3D 实现的沉浸式纵深滚动卡片特效

这是一款极具纵深感的 3D 视差滚动卡片效果,基于 CSS 3D 变换与滚动驱动动画(Scroll-driven Animation)技术实现。它将传统的平面展示空间彻底立体化,让卡片随着用户的...

纯原生 JavaScrip 视差轮播图文轮播组件,轻量高效,视觉惊艳!

视差轮播

纯原生 JavaScrip 视差轮播图文轮播组件,轻量高效,视觉惊艳!

这是一款无第三方库的原生视差轮播效果,基于原生 JavaScript 技术实现,通过层叠元素和滚动位移模拟出深度感十足的视差动画,视觉层次分明,交互流畅自然,既支持自动轮播有支持通过底部以及左右...

用 WebGL 打造的沉浸式折射晶体玻璃态动画 Hero 首屏布局

首屏3D动画

用 WebGL 打造的沉浸式折射晶体玻璃态动画 Hero 首屏布局

这是一款 WebGL 折射晶体玻璃态 Hero 首屏区域 3D 动画效果,基于 WebGL+GLSL 着色器技术实现,通过光线追踪渲染出晶莹剔透的折射晶体场景,搭配玻璃拟态风格的UI元素,营造出...

CSS导航悬停呈现富有层次感的视差效果

视差背景

CSS导航悬停呈现富有层次感的视差效果

这是一款视差导航菜单效果,基于 CSS + JS 技术实现,能让背景图片在悬停菜单项或者切换导航时,呈现出富有层次感的动态视觉变化,为网站增添科技感与交互趣味,适用于创意设计、科技类等追求独特视...

滚动触发的WebGL火烧纸张火焰逐渐扩散过渡效果(GSAP联动方案)

燃烧扩散

滚动触发的WebGL火烧纸张火焰逐渐扩散过渡效果(GSAP联动方案)

这是一款视差火焰撕裂纸张过渡效果,基于WebGL+GSAP ScrollTrigger技术实现,通过动态燃烧的粒子动画与滚动深度精准绑定,适用于叙事型网页、产品发布会等需要戏剧性场景转换的高冲击...

CSS悬停3D视差悬浮效果,给人一种物体从图片中分离出来的层次感

3D悬浮图片

CSS悬停3D视差悬浮效果,给人一种物体从图片中分离出来的层次感

这是一款纯CSS实现的立体悬浮交互,通过多层背景位移和透视变换产生3D层次感,鼠标移动时触发动态倾斜与阴影变化,适用于产品展示卡或沉浸式网页元素。

CSS悬停图片、卡片等元素实现3D视差效果

3D视差

CSS悬停图片、卡片等元素实现3D视差效果

这是一款3D卡片悬停视差效果,基于CSS 3D变换技术实现,当鼠标悬停时元素(图片、卡片等元素)产生深度位移,形成立体动态响应,适用于产品展示或交互式卡片场景。

GSAP滚动触发纸飞机航行的视差动画效果,通过纸飞机飞越不同页面区块的视觉引导

视差滚动

GSAP滚动触发纸飞机航行的视差动画效果,通过纸飞机飞越不同页面区块的视觉引导

这是一款视差滚动动画效果,基于GSAP+ScrollMagic技术实现,通过纸飞机飞越不同页面区块的视觉引导,营造流畅的浏览体验,适用于单页营销网站或作品集展示场景。

CSS实现3D视差滚动缩放交互,支持空间缩放的3D文字标签云

3D缩放

CSS实现3D视差滚动缩放交互,支持空间缩放的3D文字标签云

这是一款3D空间滚动缩放效果,基于CSS Scroll-Driven Animations技术实现,通过滚动触发三维空间透视缩放,实现3D空间中的不规则文字标签的拉进与收远效果。适用于标签展示或...

CSS带视差3D效果的守护神魔法卡片

魔法卡

CSS带视差3D效果的守护神魔法卡片

这是一款立体视差交互卡片,基于CSS 3D变换+SVG滤镜+JS技术实现,通过悬浮触发多层独立位移形成立体景深特效模拟魔法氛围,适用于奇幻主题网站或沉浸式数字收藏品展示场景。

纯CSS实现滚动前后两张图片产生视差分离效果

视差滚动

纯CSS实现滚动前后两张图片产生视差分离效果

这是一款动态视觉扭曲效果,基于纯CSS实现,随着页面滚动,背景元素(一张背景图片)逐渐远去,而另一张清晰的图片被拉近,营造出两张图片分离的动态视差效果,适用于创意滚动交互或艺术展示场景。