html360首页滚动特效,3D滚动页面特效 Space.js

3D滚动页面特效 Space.js

4月 9, 2015

评论

Sponsor

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

如果还有不懂的地方，建议查看官网的源码，下载来研究。

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站