如何做活动页面的滚动动画?让用户体验MAX的demo在这里!
2024-10-19 02:20:40
本文由云+社区发表
最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。
先上效果:
demo地址:https://kiroroyoyo.github.io/cardTransform/index.html
实现过程
1. 结构与样式
结构:卡片分前后两排,每列插入10个div结点,以便做左右位移效果。
样式:设置每一列都恰好好在中间位置(或中间位置附近),如下所示。
a. 前排(cardFrond)相对于视口的初始位置(left:-255.5%
最新文章
- Prime Time使用
- BPM业务流程管理与SAP如何更好集成整合?
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
- 学习OpenCV——绘制彩色直方图(HSV2BGR)
- hihoCoder 1385 : A Simple Job(简单工作)
- Free download
- Java [Leetcode 232]Implement Queue using Stacks
- centos安装memcache与telnet
- the c programming language 2-3
- alpha属性设置
- NGINX中的proxy_pass和rewrite
- 《Linux命令行与shell脚本编程大全》第十六章 控制脚本
- 从 HelloWorld 看 Java 字节码文件结构
- java的抽象方法为什么不能是static、final、private?
- 使用 IntraWeb (30) - TIWAppInfo、TIWMimeTypes、TIWAppCache
- xxx污水厂监控网络定点图
- Jetpack 架构组件 Lifecycle 生命周期 MD
- 图解zookeeper FastLeader选举算法【转】
- 文本框改变之onpropertychange事件
- 【SSH框架】之Struts2系列(一)