CSS图书馆 » HTML & CSS » 3D滚动页面特效 Space.js

3D滚动页面特效 Space.js

发表于: HTML & CSS. 评论
Sponsor

Space.js是一个滚动特效插件，可以让访客在滚动网页时，页面被指定的元素会以3D动画形式展示出来，而且可以为不同元素加入不同的动画效果。

space.js

Space.js演示

官网中展示了2个DEMO例子，下面大家可以点击DMEO链接看看效果，确实挺有趣的。

space.js demo

效果演示一

 

space.js demo

效果演示二

使用教程

STEP 1: 引入JS文件，如jQuery.js和space.js

<head>
 ...
 <script type="text/javascript" src="[jquery]"></script>
</head>
<body>
 ...
 内容
 ...
 <script type="text/javascript" src="space.min.js"></script>
</body>

STEP 2: 创建frame (类似动画中“帧”的意义，每个frame为一个滚动动画。)

<div class="space-frame">动画内容</div>

动画内容用.space-inner-frame包住，如下：

<div class="space-frame">
 <section class="space-inner-frame">
 内容
 </section>
</div>

设置动画时间

<section class="space-frame" data-duration="1.4">...</section>
<section class="space-frame" data-duration="0.6">...</section>

设置动画效果

<section class="space-frame" data-transition="rotate360">...</section>

支持多个动画效果一起展示的哦！

<section class="space-frame" data-transition="rotate360 fadeOut slideInLeft">...</section>

目前支持的动画效果有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/
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

与 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

{ 发表评论 }