本文由云+社区发表

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

先上效果：

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

实现过程

1. 结构与样式

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

样式：设置每一列都恰好好在中间位置（或中间位置附近），如下所示。

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

如何做活动页面的滚动动画？让用户体验MAX的demo在这里！的更多相关文章

  1. 通过$.ajax设置预加载动画加强用户体验

    以前在jquery请求数据时,总喜欢用简洁的$.get与$.post提交数据,但有时发现由于网速的问题,有些时候网站加载js获得的数据会非常慢,于是就想能不能请求数据中间,给加载数据一个提示,增加用户 ...

  2. 用户体验要好，App动画得这么做

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具.   在用户体验设计方面,App动画的设计和添加,带给设计师无限的创造空间的同时,也成为设计师群体最具 ...

  3. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  4. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  5. 微信小程序滚动动画，点击事件及评分星星制作！

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  6. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  7. 使用IntersectionObserver制作滚动动画以及其他记录

    前言 最近在重做公司项目的主页,正好新来了个UI,整个都重新设计了一下,动画还挺多的.我之前没有怎么玩过这些,踩了挺多坑,最后找到了目前而言最合适的方法,现在做一个记录. 需要把原来的主页从项目中抽出 ...

  8. 【To B产品怎么做？】泛用户体验

    目录 - 什么是泛用户体验? - 如何做好泛用户体验? - 泛用户体验有什么用? *预计阅读时间15分钟 不知道你有没有过这种体验,客服妹子的声音软糯,氛围微妙,用词标准,张口就是:给你带来了不好的体 ...

  9. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

随机推荐

  1. ios系统的Date的兼容问题

    内容来源网上,自己记录下 问题1: var date =new Date(); 这个是获取当前系统时间的对象,在各端都可以 但是: var date =new Date("2017-01-2 ...

  2. window7 32位部署django

    window7 32位安装环境,所有的软件都用32位的,如果你想要用64位的软件需要操作系统和下面的相关软件都换成64位,我是在虚拟机上装了win7 32版做的测试. 软件下载地址: python2. ...

  3. Redlock：Redis分布式锁最牛逼的实现

    普通实现 说道Redis分布式锁大部分人都会想到:setnx+lua,或者知道set key value px milliseconds nx.后一种方式的核心实现命令如下: - 获取锁(unique ...

  4. 微信技术分享：微信的海量IM聊天消息序列号生成实践（算法原理篇）

    1.点评 对于IM系统来说,如何做到IM聊天消息离线差异拉取(差异拉取是为了节省流量).消息多端同步.消息顺序保证等,是典型的IM技术难点. 就像即时通讯网整理的以下IM开发干货系列一样: <I ...

  5. Javascript高级编程学习笔记（41）—— DOM（7）DocumentFragment类型

    DocumentFragment类型 除开昨天我们了解的两种不常用的类型之外 今天我们要介绍的两种类型可以说使用频率不输于前面最常用的几种元素类型 首先就是DocumentFragment类型 有些小 ...

  6. 聊一聊Java如何接入招行一网通支付功能

    1.前提条件 相比较于支付宝和微信的支付功能接入这一块,银行相对来说更加严格,比如说支付宝,在你签约之前可以进行一些测试.但是银行来说就不是这样了,如果您现在要进行招行的支付功能开发的话,请务必先让相 ...

  7. 使用Java面向对象单词必备

    第一章 class   班级,用声明类 object     目标,整个程序集对大 static  静态的 final  不可更改的,用声明常量 private  私有的,用访问权限 public  ...

  8. python中的进制转换

    python中常用的进制转化通常有两种方法: 1.用内置函数hex(),oct(),bin(),对应的数字表示为0x,0o,0b,功能是把十进制数字转化为其他进制  >>> int( ...

  9. SPA架构的优点和缺点以及一些思考

    SPA是什么? 全称是单页面应用. 一个SPA就是一个WEB应用,它所需的资源(HTML CSS JS等),在一次请求中就加载完成,也就是不需刷新地动态加载. 用术语“单页”就是因为页面在初始化加载后 ...

  10. 浅谈HTTP Keep-Alive

    背景是一次线上故障 项目类型vue ssr 与server的数据交互用的http内网域名方案 在5月发生了一次线上CPU100%的问题,直接导致了NodeServer 500. 最终解决办法是: 1. ...