安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
横向无限视差画廊 — 惯性滚动自动吸附居中,纯原生 JS 实现
编号:横向滚动画廊

横向无限视差画廊 — 惯性滚动自动吸附居中,纯原生 JS 实现

大小 20 KB
总文件 6 个
发布 2026-08-09
更新 2026-08-09
架构 CSS+JS
分类 前端资源 - 切换与轮播
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款横向无限滚动画廊,用原生 JS + CSS 实现,没有依赖任何库。深酒红底色上是一排横向排列的圆角图片,右上角压着大字标题,整体是那种画廊海报式的排版。

    它的看点在滚动手感。滚轮在页面任意位置都能用,不需要把鼠标移到图片上;也可以直接拖着滑,松手后带惯性继续走一段,速度慢慢衰减。停下来后会自动吸附,把最近的那张图对正到屏幕中央,不会卡在两张图中间——这个细节挺加分。

    另一个是横向视差:每张图的实际尺寸比框大一圈,滚动时图片会在框内反向轻微位移,所以看起来不是整块平移,而是有前后层次的。图片列表被复制了几份首尾相接,滑到边界时无缝接上,怎么滑都不会到头。

    图片素材走的是外部图床,自己用记得替换成本地资源。移动端也做了尺寸适配。

    适合摄影和设计作品集、品牌视觉展示、电商商品陈列、展览活动页。

模板目录结构

    最新资源

    咖啡馆与餐饮品牌 HTML 响应式网站模板

    布润

    咖啡馆与餐饮品牌 HTML 响应式网站模板
    餐厅与餐饮品牌 HTML 响应式网站模板

    味澜

    餐厅与餐饮品牌 HTML 响应式网站模板
    建筑施工与工程服务 HTML 响应式网站模板

    筑衡

    建筑施工与工程服务 HTML 响应式网站模板
    AI 人工智能与技术服务 HTML 响应式网站模板

    博思科技

    AI 人工智能与技术服务 HTML 响应式网站模板
    Three.js照片胶带,拖拽展开与卷轴回收交互特效

    卷轴相册

    Three.js照片胶带,拖拽展开与卷轴回收交互特效
    虚拟货币数字资产与质押管理 HTML 移动端界面模板

    押智台

    虚拟货币数字资产与质押管理 HTML 移动端界面模板