如何做活动页面的滚动动画?让用户体验MAX的demo在这里!

时间:2022-01-06 08:14:55

本文由云+社区发表

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

先上效果:

如何做活动页面的滚动动画?让用户体验MAX的demo在这里!

demo地址:https://kiroroyoyo.github.io/cardTransform/index.html

实现过程

1. 结构与样式

结构:卡片分前后两排,每列插入10个div结点,以便做左右位移效果。

样式:设置每一列都恰好好在中间位置(或中间位置附近),如下所示。

a. 前排(cardFrond)相对于视口的初始位置(left:-255.5%