3D滚动页面特效：Space.js

jopen 10年前

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

3D滚动页面特效：Space.js

Space.js演示

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

3D滚动页面特效：Space.js

效果演示一

 

3D滚动页面特效：Space.js

效果演示二

使用教程

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/

来自：http://www.shejidaren.com/3d-scroll-space-js.html