滚动序列帧动画
Canvas 序列帧滚动拆解动画 - 手机零件分离产品展示特效这是一款滚动驱动的手机拆解演示效果,基于 HTML+CSS+原生 JavaScript 与 Canvas 逐帧绘制实现,不依赖任何动画库。做法是先把一段三维拆解动画导出成 220 张 WebP ...
Three.js螺旋画廊
Three.js 3D 螺旋图片无限滚动效果 - WebGL 惯性画廊特效这是一款三维螺旋图片无限滚动效果,基于 HTML+JavaScript 与 Three.js(WebGL)加自定义着色器实现。二十多张图片沿螺旋轨迹环绕成一条上升的"胶片带",滚轮或触屏上下滑动...
文字乱码动画
纯 CSS 特效合集 - 故障字/极光/玻璃拟态/乱码文字无依赖实现这是一款纯原生技术的 CSS 特效合集页,基于 HTML+CSS+原生 JavaScript 实现,不依赖任何框架或动画库。页面串起五种当下常见的视觉玩法:clip-path 切片错位配关键帧做...
整屏吸附滚动
Lenis + GSAP 全屏无限滚动视差效果 - 整屏吸附图片展示这是一款全屏图片无限循环滚动效果,基于 HTML+CSS 与 Lenis(平滑滚动 + 无限循环 + 整屏吸附)、GSAP ScrollTrigger 技术实现。三张满屏大图纵向排列,滚到底会无...
3D洗牌动画
Three.js 三维洗牌照片墙动画 - WebGL 卡片弯折归位特效这是一款三维洗牌归位成照片墙的动效,基于 HTML+JavaScript 与 Three.js(WebGL)技术实现。22 张照片卡最初平摊叠成一叠,点击后牌堆一分为二、两侧同时向上弯折成"桥"...
GSAP信息图
GSAP 信息图节点连线动画 - 数据落地页滚动可视化特效这是一款数据主题落地页的信息图连线效果,基于 HTML+CSS+JavaScript 与 GSAP 动画库实现。页面滚动时,分散的节点会沿路径依次点亮并连成线,把原本枯燥的数据关系变成一条能"跟...
Leaflet地图
Leaflet 自定义样式地图 — 十几套配色一键切换,带自动降级容错这是一款自定义样式地图效果,基于 Leaflet 地图框架实现,配合 GoogleMutant 插件把谷歌地图的配色方案套进来。页面左侧是一块半透明控制面板,顶部标题下方有个下拉框,列出十几套现...
Three.js赛博朋克
Three.js 低多边形赛博朋克村落 — 霓虹辉光夜景,五项参数实时可调这是一款低多边形赛博朋克村落效果,基于 Three.js + GLSL 着色器实现。画面里是一片夜色中的小镇,屋顶和楼体都是棱角分明的低面数造型,霓虹灯管勾着建筑边缘,空中飘着无人机和赛博龙来回...
滚动翻转轮播
滚动翻转 3D 立方体画廊 — 六面切换背景同步变化,CSS 3D 实现这是一款滚动翻转立方体效果,用纯 CSS 3D + 原生 JS 实现,配合 Lenis 做平滑滚动。屏幕中央是一个立方体,六个面各贴一张摄影作品。往下滚,立方体就依次翻到下一面,转到哪一面,整个...
复古贴纸生成器
在线复古贴纸生成器(JS+CSS) — 改字换色调角度,一键导出透明底 PNG这是一款复古贴纸生成器,用原生 JS + CSS 实现。画面中央是一块厚描边、带立体投影的贴纸文字,默认写着 GOOD MORNING,直接点上去就能改成自己想写的内容,支持换行。
横向滚动画廊
横向无限视差画廊 — 惯性滚动自动吸附居中,纯原生 JS 实现这是一款横向无限滚动画廊,用原生 JS + CSS 实现,没有依赖任何库。深酒红底色上是一排横向排列的圆角图片,右上角压着大字标题,整体是那种画廊海报式的排版。
无限滚照片墙
Three.js 五层视差无限图片墙 — 拖拽惯性滑动,滚轮加速的横向画廊这是一款无限滚动图片墙效果,基于 Three.js 实现。整屏是横向流动的照片,分成五层,越靠前的图越大越亮、跑得越快,越靠后的越小越淡、跑得越慢,叠在一起就有了明显的纵深感。每张图还在轻微上下...