3D滾動頁面特效：Space.js

jopen 9年前發布 | 23K 次閱讀 Space.js JavaScript開發工具包

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
    • </ul>

    如果還有不懂的地方，建議查看官網的源碼，下載來研究。

    插件名稱：Space.js
    插件地址： http://www.slashie.org/space.js/

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

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！