GSAP 悬停交互
GSAP 实现的图片卡片随鼠标移动产生位移,创意网页展示必备这是一款横向滚动卡片悬停交互效果,基于 GSAP.js 动画库实现,鼠标悬停卡片时卡片滚动位移丝滑无卡顿,并且标题自动高亮变色,交互反馈清晰直观,适用于个人作品集、摄影画廊、品牌官网等需要横向内...
倾斜悬浮卡片
纯 CSS 实现 3D 倾斜卡片横向画廊这是一款基于纯 CSS 3D 变换实现的横向滚动卡片画廊。默认状态下所有卡片以统一的透视倾斜角度排列,像一排被推倒的多米诺牌,本身就已经很有空间纵深感。悬停时焦点卡片「站直」回正,虚线边框浮现,...
穿梭视界
基于 CSS 3D 实现的沉浸式纵深滚动卡片特效这是一款极具纵深感的 3D 视差滚动卡片效果,基于 CSS 3D 变换与滚动驱动动画(Scroll-driven Animation)技术实现。它将传统的平面展示空间彻底立体化,让卡片随着用户的...
滚动卡片
GSAP立体光影卡片滚动轮播效果,让内容展示更有层次感这是一款滚动卡片轮播效果,基于 GSAP 、ScrollTrigger技术实现,滑动鼠标或者拖动卡片切换时,通过径向渐变模拟卡片的光影变化,让卡片在滚动切换时呈现出立体感和层次感,视觉上更接近真...
无限滚动卡片
GSAP 无限横向滚动图文卡片特效,支持多种切换操控方式这是一款基于 GSAP 技术实现的无限循环横向滚动效果,支持按钮、键盘(上下箭头/PgUp/PgDn)及鼠标滚轮操控,而且支持响应式布局,能在手机登小设备屏幕良好运行,适用于横向内容展示、轮播图...
水平滚动
HTML实现水平方向滚动卡片效果,超过屏幕的卡片自动隐藏横向排列多张内容卡片超过屏幕的卡片自动隐藏,使用GSAP结合ScrollTrigger插件实现水平滚动卡片效果,可以让每一行的卡片在用户滚动页面时以流畅过渡动画形式展现出来。当用户浏览到这一部分...