シングルページアプリケーションが流行るのに伴って、スクロールによってコンテンツをアニメーションさせるタイプのサイトが増えてきました。ただつらつらと文字を流していくのに比べるとインパクトがあり、面白いです。 そんなスクロール型アニメーションコンテンツを作成できるJavaScriptライブラリがSpace.jsです。3Dエフェクトをサポートしています。

Space.jsの使い方

例えばこんな感じに文字が傾いたりします。

後は実際のデモを見てもらうのが早いでしょう。

文字だけでなく画像を扱うこともできます。

コンテンツはdiv.space-frame の中に作成していきます。

<div class="space-frame">[contents]</div>
または
<div class="space-frame">
    <section class="space-inner-frame">
        [contents]
    </section>
</div>

そしてエフェクトはdata要素で指定します。

<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>

エフェクトはフェードイン、アウトに加えて回転したり、スライドイン/アウトなど20種類近く用意されています。コンテンツの作り方はシンプルなので、使いこなすのは容易でしょう。

Space.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Space.js – HTML-driven narrative 3D-scrolling gopatrik/space.js