垂直滚动时实现横向行进类动画(如车辆行驶)的实现方案咨询
目标实现效果
垂直滚动页面时触发横向动态视觉,模拟车辆沿道路行驶的动画效果,参考同类物流站点车队板块的成熟交互逻辑。
前期已开展的尝试
- 参考效果的原实现基于WordPress插件,目前检索了相关现成插件,未找到可完全匹配该动画效果的工具
- 尝试用「固定背景」方法实现CSS视差效果,实际呈现效果未达预期
- 尝试将车辆元素类比滚动进度条制作位置联动动画,实际效果不理想
- 已搭建独立测试Demo用于效果调试
当前遇到的核心定位痛点
车辆元素的定位逻辑始终无法匹配预期的层叠效果:
- 若为车辆元素设置
absolute定位,元素会随背景一同上下位移,无法保持和道路的相对绑定关系 - 若为车辆元素设置
fixed定位,元素会始终悬浮在所有内容层上方,无法实现内容与车辆、道路的前后遮挡关系
期待获取的参考方向
- 可匹配该效果的现成可用插件推荐
- 该类滚动联动动画的通用实现逻辑说明
- 兼容jQuery、原生JavaScript的可落地实现方案参考
内容的提问来源于stack exchange,提问作者yourniceshot
相关产品推荐
相关产品推荐

