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

スクロールすると、ページに配置されているあらゆる要素が3D空間にあるみたいに気持ちよくアニメーションするjQueryのプラグインを紹介します。

さまざまなエフェクトが驚くほど簡単に実装できるので、お試しあれ!

サイトのキャプチャ

Space.js
Space.js -GitHub

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>

sponsors

top of page

©2018 coliss