Space.js是一个滚动特效插件,可以让访客在滚动网页时,页面被指定的元素会以3D动画形式展示出来,而且可以为不同元素加入不同的动画效果。
Space.Js演示
官网中展示了2个DEMO例子,下面大家可以点击DMEO链接看看效果,确实挺有趣的。
使用教程
STEP 1: 引入JS文件,如jQuery.js和space.js
STEP 2: 创建frame (类似动画中“帧”的意义,每个frame为一个滚动动画。)
动画内容用.space-inner-frame包住,如下:
设置动画时间
设置动画效果
支持多个动画效果一起展示的哦!
目前支持的动画效果有18种之多!
- scaleIn
- fadeIn
- scaleOut
- fadeOut
- rotateQuarterRight
- rotateInQuarterClockwise
- zoomOut
- slideInBottom
- slideOutDown
- slideOutLeft
- slideOutRight
- slideInRight
- slideOutUp
- slideInTop
- slideInLeft
- slideBottomRight
- rotate360
- rotate3dOut
如果还有不懂的地方,建议查看官网的源码,下载来研究。
插件名称:Space.js
插件地址: http://www.slashie.org/space.js/
插件地址: http://www.slashie.org/space.js/