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

本文由云+社区发表

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

先上效果:

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

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

实现过程

1. 结构与样式

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

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

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

上一篇:Node.js: What is the best "full stack web framework" (with scaffolding, MVC, ORM, etc.) based on Node.js / server-side JavaScript? - Quora


下一篇:JDK1.6官方下载_JDK6官方下载_JDK1.6API(chm)下载_JDK6APICHM中文参