原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin
先验货
插件代码可以在这里找到。
注意,虽然是扫码体验,但是 AlloyTouch.FullPage 特意对鼠标滚轮事件进行了兼容,所以 PC 上的全屏滚动页面也可以使用它来快速制作。
使用姿势
在设计全屏滚动插件的时候,希望开发者几乎:
- 不用写任何脚本快速生成精致 H5
- 支持 PC 滚轮和移动触摸
- 酷炫的转场动效
- 灵活的时间轴管理
- 一切皆可配置
但是不写脚本肯定没有灵活性咯?!不是的。这里不仅仅可以通过在 HTML 配置一些参数,还可通过插件的回调函数进行一些逻辑注入。就拿上面大家扫码看到的例子的部分 HTML 来分析下 AlloyTouch.FullPage 的使用姿势:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="fullpage"> <div> <div> <div class="animated" data-show="bounceInLeft" data-hide="bounceOutLeft">AlloyTouch Introduction</div> <div class="animated" data-delay="500" data-show="bounceInUp" data-hide="zoomOut"><img src="asset/alloytouch.png"></div> <div class="animated" data-delay="1200" data-show="bounceIn" data-hide="bounceOut">By AlloyTeam</div> </div> </div> <div> <div> <div class="animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Powerful Features</div> <div class="animated" data-delay="400" data-show="zoomIn" data-hide="zoomOut"><img src="asset/power.png"></div> </div> </div> ... ... ... </div> |
注意,上面只是部分 HTML,而且我已经把一些和插件配置无关的 HTML 去掉了。下面一一进行分析:
- class="animated" 符合 animate.css 的约定,加上了这个 class 代表会有动画。
- data-delay 代表滚到该页面之后,被标记的 DOM 元素要等待多久才开始播放动画。如果开发者不标记的话默认值是 0。
- data-show 代表被标记的 DOM 元素显示的动画类型
- data-hide 代表被标记的 DOM 元素隐藏的动画类型(这个通常用户看不到,但是为了 show 的时候平滑,一般设置为与 data-show 的相反的类型)
就这么多,配置就这么多,配置就这么多!!够简单把!!
当然你需要在 js 里面初始化一下:
1 2 3 4 5 6 7 8 9 10 11 12 |
new AlloyTouch.FullPage("#fullpage",{ animationEnd:function () { }, leavePage: function (index) { console.log("leave"+index) }, beginToPage: function (index) { |