dribbble 上动画效果的 Javascript 实现。
项目只在最新版 Chrome 和 Safari 上进行了测试,其它浏览器估计不会去支持,不过欢迎反馈意见。
推荐使用 iphone safari 保存到桌面再打开。
原效果图:
原链接: Pull to Refresh in Marvel 5.0
Deom 链接: https://chemzqm.github.io/dribbble-effects/refresh.html
主要使用了chemzqm/iscroll 和chemzqm/swipe-it两个组件。
- 仅限移动设备体验
- 右上的图标是 unicode, 部分旧浏览器不支持带颜色
- 删除图标背景是 svg,部分浏览器不支持 svg 做为图片背景
- 下拉刷新的效果是 canvas 加 requestAnimationFrame 实现的,因为控制最灵活
- 删除图标动画是 css animation,因为实现简单
- 代码没有注释,抽象也或许不太合理,仅供参考
- 图片是从美食应用截取的,组您开胃😋
原效果图:
Deom 链接: https://chemzqm.github.io/dribbble-effects/friday.html
已知问题:
-
ios9 safari 不支持状态栏透明,所以现在只能是白色, 详情访问此链接
-
不支持横屏(确切说这个效果不知道如何支持),但是现在大部分浏览器并不支持锁屏的 API, 所以就将就下吧,毕竟只是为了实现效果
npm install
gulp
open http://localhost:3000/example/friday.html