[JS]気持ちいいアニメーションを伴ったさまざまなスクロールエフェクトが簡単に実装できてしまうスクリプト -Space.js

サイト構築 -JavaScript

Post on:2015年4月3日

Space.jsのデモ

デモは2種類。
まずはギャラリー、タイポグラフィやグラフィックや写真などを次々に3D空間に漂わせます。

Demo 1 – The Gallery

2つ目は、宇宙空間を背景に使ったかっこいいデモです。

Demo 2: Out of Space

Space.jsの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsを外部ファイルとして記述します。

<head>
  ...
  <script type="text/javascript" src="&#91;jquery&#93;"></script>
</head>
<body>
  ...
  コンテンツ
  ...
  <script type="text/javascript" src="space.min.js"></script>
</body>

Step 2: エフェクトの設定

まずは、コアとなるフレームを作成します。この中にアニメーションさせる要素を配置します。

<div class="space-frame">コンテンツ</div>

アニメーションさせる要素には「.space-inner-frame」を付与します。

<div class="space-frame">
  <section class="space-inner-frame">
    コンテンツ
  </section>
</div>

あとはdata属性でタイミングを指定します。

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

エフェクトを指定することも可能で、複数のエフェクトを組み合わせることもできます。
例）360度回転させ、フェードアウトし、左にスライド

<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

オリジナルのエフェクトを定義することもできます。

<script type="text/javascript">
    var transitions = {
        rotate720: {
            'rotate':{from:0, to:720}
        },
        fadeOutHalf: {
            'opacity':{from:1, to:0.5}
        }
    };
    Space.addTransitions(transitions);
</script>