移动端页面上下滑动效果

html-css013

移动端页面上下滑动效果,第1张

简单的做法：

首先设置元素出状态 top （js 的 clientHeight）

利用 css3 transition，（例：transition: top .2s ease）

然后通过事件改变 top 的值，达到滑动的效果（top: client页面高度 ->top: 0）

（以上仅为参考，该元素需要 position: fixed）

复杂的可以再去上网寻找下各种例子，甚至是尝试模仿一些app的效果自己做点东西出来

前几天刚做了几个微信分享的活动专题页面，单屏切换那种。应该是楼主需要的那种。

hahnzhu/parallax.js · GitHub - 这个是现成又快速的，每屏页面自带动画。要快又懒的话就直接用里面demo套进去再更改下元素的先后顺序就行了。

yanhaijing/zepto.fullpage · GitHub - 移动端的fullpage。比较灵活，页面动画需自己写。

tgideas/motion · GitHub - 还有这个。

类似的库应该还有很多，以上都是针对移动web的，想快速又不想动脑子就直接用了。