スクロールに応じたアニメーションって何

「パララックス」と一言にいってしまえば良いのですが、 視差効果で立体的に見せる手法を指して「パララックス」と言うのならば そうではないコンテンツも多くあると思いますので、 「スクロール量に応じてコンテンツをアニメーションさせる事」を、 ここではそのように呼称したいと思います。

ちょっと長いので「スクロールアニメーション」でいいでしょうか。

シンプルな例

具体的にどういう事なのかをごくシンプルなコードで表現してみます。

$(window).on("scroll", function(){
    var scroll = $(window).scrollTop();
    $(".box").css({
        "top": scroll,
        "left": scroll * 2
    });
});

“.box” のtop/leftを現在のスクロール量に合わせて変化させる処理をスクロールイベントに登録しています。 位置の他にも、要素のサイズや色、スプライトされた背景画像のポジションなどを変化させれば ユーザーのスクロールにあわせて多彩な表現が出来ますね。

requestAnimationFrameを使ってみる

ここでスクロールイベントの代わりに、新しめの実装の requestAnimationFrame を使ってみようと思います。

var step = function(){
    var scroll = $(window).scrollTop();
    $(".box").css({
        "top": scroll,
        "left": scroll * 2
    });
    requestAnimationFrame(step);
};
step();

cf) requestAnimationFrameについて調べてみた

jQuery.easing プラグインを利用してイージングをかける

本題です。上のコードではイージングが一切かからない状態でアニメーションされます。 これにイージングをかけたいです。しかも楽をしてかけたい。すごくかけたい。

JavaScriptでのイージングといえば jQuery.easing プラグイン がおなじみですね。 このプラグインで宣言されるイージングの関数（ $.easing.* ）を使えば簡単に出来そうですが、 まずイージング関数に何を渡せばいいかを調べてみます。

実際にイージング関数に渡されている引数

jQueryにはじめから同梱されているイージングは “swing” と “linear” があります。 まずはこれらの関数で引数をどのようにとっているか、コードを拝見してみます。

jQuery.easing = {
    linear: function( p ) {
        return p;
    },
    swing: function( p ) {
        return 0.5 - Math.cos( p*Math.PI ) / 2;
    }
};

この p はどうやら開始値から終了値までの範囲で今どの地点にいるのかを渡しているみたいです。

では jQuery.easing プラグインではどのようになっているか見てみましょう。

easeOutQuad: function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
},

この “easeOutQuad” は “swing” の代替として宣言されている関数なわけですが、引数を見てみると全然数が違う上に、第一引数の “x” を使用していません。 jQuery.easing プラグイン のWebサイトを参照すると、右下の方に引数の解説が記載されています。 軽く拙訳を書いてみると、こんな感じみたいです。

jQuery.easing.method(
    null,          // 式では使用しない
    current_time,  // 現在の時間
    start_value,   // 開始値
    end_value,     // 終了値
    total_time     // 所要時間
)

スクロール量をベースにしてイージングをかけるためには、”current_time” と “total_time” をスクロール量におきかえてあげればうまくいきそうですね。

実際に簡単に動かしてみる

アニメーションを開始・終了するスクロール位置を定義してやり、その差を duration (“total_time”) として扱います。 現在のスクロール位置は、関数に渡す前にスクロール開始位置を引いてやりましょう。

/**
 * スクロール量が 500-1000 に差し掛かった時に
 * ".box" の "left" を 100-1000 の間でアニメーションさせる
 */
(function(){
    var box, start, end, from, to;

    box = $(".box");
    scrollStart = 500; // アニメーションを開始するスクロール位置
    scrollEnd = 1000;  // アニメーションを終了するスクロール位置
    from = 100;  // "left" の開始値
    to = 1000;   // "left" の終了値

    step = function(){
        var scroll, progress;
        scroll = $(window).scrollTop();
        if(scroll < scrollStart){
            box.css("left", from);
        } else if(scroll > scrollEnd){
            box.css("left", to);
        } else {
            // scroll と duration から現在位置を割合で取得
            progress = $.easing.easeOutQuad(
                null,
                scroll - scrollStart,
                0,
                1,
                scrollEnd - scrollStart
            );
            // 取得した割合を掛けて値を取得し、"left" に設定する
            box.css("left", from + (to - from) * progress);
        }
        requestAnimationFrame(step);
    };

    step();
}());

“linear” はどうなるのか

jQueryに同梱されているイージング関数2点のうち、”swing” は jquery.easing プラグインで再定義されているので問題ないのですが、 “linear” は上のコードのように使おうとすると引数が合わずに正常に動きません。

取り急ぎですが、引数を合わせた形で再定義してみます。

$.easing.linear = function(x, t, b, c, d){
    if(x !== null){ return x; }
    return b + ((c - b) * (t / d));
};

いろんなイージングで動かしてみたデモ

まとめ

スクロールアニメーションを操作するライブラリを先日見かけたのですが、 そのライブラリではいくつかのイージング関数を独自に定義していました。 （あろうことか、どのライブラリのコードを読んでいたのか、書いているうちに忘却してしまいました…）

せっかくなので様々なイージング関数を楽して使えたらな、と思い調べてみた記録でした。

requestAnimationFrame とは

window.requestAnimationFrame – Web API リファレンス | MDN

window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。

ちょっとわかりにくいですが、 要するに次の再描画のタイミングで処理を実行する事を予約できる setTimeout のような代物だと解釈しています。

var step = function(){
    /* アニメーションの処理 */
    requestAnimationFrame(step);
};
step();

このように書くと、step内の処理がおよそ60FPSぐらいの頻度で繰り返されます。 つまり、setTimeoutで書きなおすとこんな事をしている事になるのでしょうか。

var timer = null;
var step = function(){
    clearTimeout(timer);
    /* アニメーションの処理 */
    timer = setTimeout(step, 1000 / 60);
};
step();

タイマーとrequestAnimationFrame

挙動としては近しい物なのですが、具体的にこの2つが異なる点はこんな感じなのでしょうか？

• requestAnimationFrame はウィンドウがアクティブでない時にFPSを落とす
• requestAnimationFrame は再描画出来るタイミングで実行されるので、FPSを保証しない
  
  （setTimeoutが必ず保証するという意味ではない）
• setTimeoutはなにがなんでも言われた時間に実行しようとする実直なやつ

特に前者の違いはパフォーマンスに結構影響を及ぼしそうです。 非アクティブにしたタブの中でゴリゴリメモリを消費していく… なんていう事が起きにくくなりますね。

タイマーよりアニメーションに適した実装と言えそうです。

ブラウザ対応

気になるブラウザ対応ですが、MDNのリファレンスのサンプルから拝借してきたのが下記のコードです。

(function() {
    var requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
}());

問題のIEですが、調べた限りではIE10から “requestAnimationFrame” と “msRequestAnimationFrame” ともに使用可能で、IE9以前は非対応とのことなので、”msRequest〜” のくだりは不要そうですね。

該当箇所を削除して、非常に簡単ではありますが非対応環境用のコードを足してみましょう。

(function(win){
    var timer = null, polyfill;
    polyfill = function(callback){
        clearTimeout(timer);
        setTimeout(callback, 1000 / 60);
    };
    win.requestAnimationFrame = win.requestAnimationFrame
    || win.mozRequestAnimationFrame
    || win.webkitRequestAnimationFrame
    || polyfill;
}(window));

これでどの環境でも「だいたい」同じような動きをするようになると思います。

実際に何か動かしてみる

早速、簡単なデモを動かしてみます。クリックした場所に顔文字が近づいて行きます。

JavaScript（抜粋）

(function(){
    var target, $el, step;

    target = { left: 0, top: 0 };
    $el = $(".sample");
    step = function(){
        var pos = $el.offset();
        $el.css({
            left: "+=" + (target.left - pos.left) / 5,
            top: "+=" + (target.top - pos.top) / 5
        });
        requestAnimationFrame(step);
    };
    step();

    $(document).on("click", function(e){
        target.left = e.clientX;
        target.top = e.clientY;
    });

}());

まとめ

requestAnimationFrameは、jQueryでは諸問題があって現在は採用していない様です。
cf) Why doesn’t jQuery use requestAnimationFrame? – Stack Overflow
確かに時間ベースの処理と相性が悪い部分はありそうです。

取り急ぎインターバルで何かを監視したい時などに使ってみるか、 あるいは、$.fn.animate が苦手な部分で活躍してくれるかもしれませんね。

FlashSprite.js

Flashspritejs by mach3

Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。

前回の処理に加えて停止や逆再生、各種設定やイベント発火等の機能を付け足した物です。 使い方は上記URLで概ねわかると思いますが、簡単にご紹介しておきます。

簡単な使い方

1. FlashCS6+でスプライトシートを生成する

FlashIDE上で、ステージに配置したアニメーションインスタンスを右クリックし、 コンテキストメニューから「スプライトシートを生成」を選択してダイアログを開きます。

データ形式は「JSON-Array」を選択し、「書き出し」を行います。 ステージ上でインスタンス名を付けておけばその名前でファイルが作成されます。

2. 配置する

画像ファイルとJSONファイルが出力されるので、任意の場所に保存しましょう。 今回はこんな感じにしてみます。

./
├ data/
│ ├ sprite.json
│ └ sprite.png
└ index.html

3. ロードする

jQueryとFlashSprite.jsを読み込んで、新しい要素を生成してスプライトアニメーションを初期化します。

(function(){
    var myAnimation = $("<div>");
        myAnimation.flashSprite({
                src : "data/sprite.json"
        })
        .appendTo($("body"));
}());

$.fn.flashSprite() にオプションを渡す事で初期化され、要素にロードされます。 デフォルトの設定では自動再生がオンになっているので、初期化した時点で再生がはじまります。

無事再生されましたか？

イベントとメソッドを使ってみる

イベントとメソッドを使う事でもう少し細かい処理をする事ができます。 下の例では、データロードの完了を待って、アニメーションを配置・フェードインさせています。

(function(){
    var myAnimation = $("<div>");

        // JSONと画像がロードされると "flashSpriteReady" イベントが発火します
        myAnimation.on("flashSpriteReady", function(){
                $(this).hide()
                .appendTo($("body"))
                .flashSprite("config", { fps : 60 }) // "config" メソッドで設定変更
                .flashSprite("play") // "play" メソッドで再生
                .fadeIn();
        });

        myAnimation.flashSprite({
                src : "data/sprite.json",
                autoPlay : false, // 自動再生をオフに
                repeat : false // 繰り返し再生をオフに
        });
}());

イベントには、ロード完了時に発火される “flashSpriteReady” の他に、 停止時の “flashSrpiteEnd”、フレーム毎に発火する “flashSpriteEnterFrame” が用意されています。

また、jQuery.fn.flashSprite() にメソッド名を文字列で渡すことでメソッドを呼び出す事ができます。 第二引数以降はそのメソッドに渡されます。

それぞれの詳細はドキュメントをご参照ください。

まとめ

と、こんな感じで作ってみました。

実際のところ、機能豊富なCreateJSを利用すべき場面の方が多いと思いますが、 その為に大きなソースを追加で読み込まなければならないのも事実。

ただパラパラ漫画を再生する為だけに大仰な…と感じるようなケースなら、 こんな単機能のライブラリも使い道があるのかな、と思います。

スプライトシートってなに

スプライトシートは、CSSスプライトを利用したアニメーションテクニックです。 アニメーションの全フレームを一つの画像に並べて配置し、 要素の背景画像として埋め込んで background-position を変更していくことで パラパラ漫画のようなアニメーションを再生します。概要はこんな感じ。

一年程前、CS6が出るちょっとだけ前に似たような記事を書いたことがありました。

• シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 | Mach3.laBlog

上の記事はまだCS6が出る前だったので自力でスプライトシートを作成する前提のものですが、 せっかく出力する機能があるんだから利用させて頂こうという事で、今回の記事なわけです。

CreateJSでやればよくない？

その通りです。その方が効率的なのでそれでいいと思います。

今回の記事は、あまり多くの依存ライブラリを読み込みたくなかったり、 宗教上の理由や遺言、あるいは政治的外圧等でjQueryで処理せざるを得ないケースを想定したものです。 CreateJSでの利用の仕方については、おそらく多くの方が詳しい記事を書いてくださっているので、そちらをご参照ください。

FlashCS6+でスプライトシートを生成する

例えば、FlashCS6でアニメーションのムービークリップ等を作り、それをステージに設置します。 その設置されたインスタンスを右クリックすると、コンテキストメニューに「スプライトシートを生成」が表れます。

それを選択すると現れるのがこんなダイアログ。

ここから「書き出し」を行うと、画像とデータ形式で指定したデータが出力されます。 指定出来るデータはJSON、各種ゲームエンジンの形式、そしてCreateJSのeaseljs形式です。

今回は使いやすそうだった “JSON-Array” 形式を使用します。

JSONデータの中身

“JSON-Array” で出力されたJSONデータの中身はこのような構成になっています。

{
        "frames": [
                {
                        "filename": "loading0000",
                        "frame": {"x":0,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }
                ,{
                        "filename": "loading0001",
                        "frame": {"x":33,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }

                ...

        ],
        "meta": {
                "app": "Adobe Flash CS6",
                "version": "12.0.0.481",
                "image": "sample.png",
                "format": "RGBA8888",
                "size": {"w":256,"h":256},
                "scale": "1"
        }
}

“frames” が実際のアニメーションのデータで、配列の中に個々のフレームの情報（サイズや座標等）を格納したオブジェクトが並んでいます。

“meta” にはスプライトシートの基本情報が格納されています。

このデータから再生するには…

アニメーションを再生するには、”frames”内のインデックスをひとつずつ進めてやり、格納されている座標情報を元に背景画像を移動してやる要領でしょうか。 座標は画像の左上からの座標なので、これを background-position に適用する際はマイナスの数値にしてやる必要がありますね。

再生させてみよう

では早速このデータを元にアニメーションを設置し、再生させてみましょう。 JSONデータも画像データもHTMLと同じディレクトリにある想定で進めます。

JSONを読み込む

まずJSONデータを読み込みます。

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){
            var my = {};

            my.data = data;

            // この中でいろいろしよう
    });

}(jQuery));

アニメーションの要素を生成、配置する

受け取ったJSONのデータの内容から、アニメーション用のHTML要素を生成し、bodyに配置します。

my.node = $("<div>").css({
    "width" : my.data.frames[0].sourceSize.w,
    "height" : my.data.frames[0].sourceSize.h,
    "background-image" : "url(" + my.data.meta.image + ")"
})
.appendTo($("body"));

要素のサイズははじめのフレームの “sourceSize” から取得することにします。

画像は、前述の通り同じディレクトリで展開する想定なのでそのまま代入していますが、
恐らく運用時は他のディレクトリに入れると思うので、その時はその時で画像へのパスをなんやかんやする必要がありますね。

再生する

今回は、単純に setTimeout で再生用の関数をぶん回して繰り返し再生を行います。

my.index = 0; // 現在のフレームインデックス
my.length = my.data.frames.length; // 合計フレーム数
my.interval = Math.floor(1000/30); // 約FPS30ぐらいで再生

my.play = function(){
    var frame;

    my.index = (my.index + 1) % (my.length - 1);
    frame = my.data.frames[my.index].frame;
    my.node.css(
            "background-position",
            "-" + frame.x + "px -" + frame.y + "px"
    );
    setTimeout(my.play, my.interval);
};

my.play();

他にも、ページのスクロール位置やマウスの挙動などをトリガーにしたりすると表現の幅が広がりますね。

全体のコード

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){

        var my = {};

        my.data = data;

        my.node = $("<div>").css({
            "width" : my.data.frames[0].sourceSize.w,
            "height" : my.data.frames[0].sourceSize.h,
            "background-image" : "url(" + my.data.meta.image + ")"
        })
        .appendTo($("body"));

        my.index = 0;
        my.length = my.data.frames.length;
        my.interval = Math.floor(1000/30);

        my.play = function(){
            var frame;

            my.index = (my.index + 1) % (my.length - 1);
            frame = my.data.frames[my.index].frame;
            my.node.css(
                    "background-position",
                    "-" + frame.x + "px -" + frame.y + "px"
            );
            setTimeout(my.play, my.interval);
        };
        my.play();
    });
}(jQuery));

めんどくさい！

勿論毎度これは面倒なので、ライブラリ化してみましたが、それは後編で。

» FlashCS6+で生成したスプライトシートをjQueryでロードする実験（後編） | Mach3.laBlog

1. 基本的な仕組み
2. ぼかし画像の透明度について
3. 簡単なデモ
4. まとめ

基本的な仕組み

まずスライダーに使用する絵を連結して一枚の画像にしたものを作成。 そして、その画像を横にブレさせた画像を別途用意します。

ぼかし画像は、例えばFireworksなら「移動（ぼかし）」を水平方向にかけ、 さらにその上に反対方向の「移動（ぼかし）」をかけたものを透明度50%ぐらいで重ねています。 ぼかしの強さはコンテンツの内容・大きさとご相談で、いい按排を探ります。

HTML上ではその2つの画像を、ぼかし画像を上にして重ね合わせて配置し、 スライダーが動く時にぼかし画像の透明度を変更してスピード感を出します。

基本的な仕組みはこんな感じです。

ぼかし画像の透明度について

さて、課題はぼかし画像の透明度をどのように調整するか。 前提として、こんなHTMLとスタイルシートを用意しました。

<div id="my-slider" class="blur-slider">
    <div class="slider-images">
        <img src="./photo-blur.png" class="image-blur" />
        <img src="./photo.png" />
    </div>
</div>

<style>
    .blur-slider {
        position: relative;
        width: 500px;
        height: 331px;
        border: 2px solid #fff;
        margin: 0 auto;
        overflow: hidden;
    }
    .blur-slider .slider-images {
        position: absolute;
        left: 0;
        top: 0;
    }
    .blur-slider .slider-images .image-blur {
        position: absolute;
        opacity: 0;
        filter: alpha(opactiy=0);
    }
</style>

普通に値を変更した時のコレジャナイ感

まずはじめに、単純にスライダーと同時にぼかし画像を表示させ、アニメーション終了にあわせて透明度を下げていってみました。 ざっと書くとこんな感じです。

var $container, $slider, $blurImage, show;

$container = $("#my-slider");
$slider = $container.find(".slider-images");
$blurImage = $slider.find(".image-blur");

show = function(index){
    $slider
        .stop()
        .animate(
                { left: $container.width() * index * -1 }
        );
    $blurImage
        .stop()
        .css("opacity", 1)
        .animate(
                { opacity: 0 }
        );
};

show(1); // とりあえず2番目の画像を表示してみる

動かしてみましたが、かなり動きに違和感があります。 他にも、変化を山なりにしてみたりしましたが、どうもコレジャナイ。 イージング関数によってはまともに見えるかもしれませんが、 実際の速度とブレが同期してないので気持ち悪くて当然ですね。

はやければはやいほどブレるように

やはりブレは動きの速さに比例するもの。 そこで、動きがはやければはやいほどブレるように調整した show 関数を書いてみます。

show = function(index){
    $slider.stop().animate(
        {
            left : $container.width() * index * -1
        },
        {
            duration : 500,
            easing : "swing",
            step : function(now){ /* A */
                if(this.prevLeft !== undefined){
                    $blurImage.css(
                        "opacity",
                        Math.abs(this.prevLeft - now) / 25 /* B */
                    );
                }
                this.prevLeft = now;
            },
            complete : function(){ /* C */
                $blurImage.css("opacity", 0);
            }
        }
    );
};

(A) jQuery.animate のオプションの “step” では、アニメーションのステップ毎に関数を実行する事ができます。 上の例では、前ステップの値と現在の値を比較して、その差からぼかし画像の透明度を計算しています。

(B) “25”は、1ステップに何ピクセル以上動いている時に不透明度100%とするか、という数値です。 要するにどのくらいの速度ならばブラーが最大限表示されるか。 移動距離やコンテンツの大きさでうまいこと調整します。

(C) “complete” はアニメーション完了時の関数を実行できます。 完了時にはぼかし画像の不透明度をゼロにします。

ステップ毎に計算させる関係でパフォーマンスがちょっと心配になりますね。 多用はあまりしない方がよさそうですが、今回の Matsukaze. では2箇所限定なので、この方法を採用してみちゃいました。 やはり少々重たい気がしますが、ブレが少し自然になったとおもいます。

簡単なデモ

イージング関数と所要時間をいじれるデモを作ってみましたのでどうぞ。

JS Bin

まとめ

わりと泥臭い感じではありますが、パフォーマンスはともかく見た目的には結構満足しています。 もう少しスマートな方法あったら、改善してみたいです。

MovieCrop.jsについて

• MovieCrop.js via Github

MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。 名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。

再生/逆再生/停止/巻き戻しが出来ます。

簡単な使い方

まず使用する画像を作成し、ブロック要素の背景にします。

要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなので、そのような画像を用意します。

アニメーションの再生方法は、jQueryオブジェクトのmoviePlay()メソッドをコールするだけです。

$(".loading").moviePlay();

逆再生・停止・巻き戻しも同じ要領で。

$(".loading").movieReverse(); // 逆再生
$(".loading").movieStop(); // アニメーションをストップ
$(".loading").movieRewind(); // 最初のコマに巻き戻す

動きをカスタマイズする

動きをカスタマイズするには、moviePlay/movieReverseメソッドにオプションを渡します。

$(".loading").moviePlay({
    fps : 20, // fps（1秒毎のフレーム数）
    frames : 20, // 合計フレーム数
    repeat : true, // リピート再生をするか否か
    direction : "vertical" // アニメーションの方向
});

完了時のコールバックを設定する

アニメーション完了時のコールバックを、moviePlay/movieReverseの第二引数で設定できます。 このコールバックは、アニメーションが「完了」しないと呼ばれません。 つまり、オプションのrepeatをfalseに設定し、最後のコマまで進んだ時初めて呼ばれます。

$(".loading").moviePlay({
    repeat : false
}, function(){
    console.log("アニメーションが完了しました");
});

MovieCropクラス

MovieCropクラスのインスタンスを生成して使う事もできます。 この場合は、第一引数にはjQueryオブジェクトではなく、HTMLElementを渡して下さい。

var ele, mc;
ele = $(".loading")[0];
mc = new MovieCrop( ele, {
    fps : 20,
    frames : 20
});
mc.play();

MovieCropクラスは次のメソッドを持ちます。

• play(callback) : 再生する
• reverse(callback) : 逆再生する
• stop() : 止める
• rewind() : 最初のコマに戻る
• nextFrame() : 次のコマに進む
• prevFrame() : 前のコマに戻す
• setFrame(frame) : 指定されたコマに移動する

デモ

• MovieCrop.js DEMO via jsfiddle

まとめ

冒頭で申し上げた通り、この手のソリューションは他にも優秀な選択肢があります。 特にもうじき発表されるAdobeFlashCS6は、FlashIDEで制作したアニメーションからCSSスプライトシートを書き出す事ができ、そこからそのままアニメーションさせる事が出来るスグレモノです。 スプライトアニメーションは素材の画像を作るのが恐らく一番面倒なので、こうしたアプリケーションは大変助かりますね。

ならばこのライブラリをいつ使うのかと言うと…。シンプルさ故にライブラリ間の競合の不安が少し減る程度の存在意義は…あるかな。

一番はじめに目についたアニメーションがコレです。

アップテンポな音楽に乗せてキュートなテディベアがトコトコ歩いていると思ったら…
あれよあれよと展開していく、実に飽きの来ないアニメーションです。
大変シュール。

横スクロールで牛がどんどん変化していく不思議なアニメーションも。
BGMはずっと聴いてると情緒不安定に陥りそうな雰囲気。

良いセンスしてますね…。
他にも色々ビデオを公開しているので、チェックしておきたいです。

YouTube – ‪cyriak さんのチャンネル‬‎
Cyriak

ひょっとしたら今更！とか言われるかもしれませんが、ご紹介。
日本ってこんな不思議な国なのかと考えさせられてしまうアニメーションです。

Japan – The Strange Country (Japanese ver.) on Vimeo

ちょっとアイロニーなナレーションもまたささやかな笑いを呼びますね。
数字の裏付けもあって実に説得力のあるプレゼンです！面白かった。

作者さんのコメント。

日本で生活していると、当たり前すぎて気づかない「不思議な事実」を、
海外で生活した経験も生かし、外国人の視点から統計とともに映像化しました。
笑いつつも、「なんか不思議だな」と考えてもらえれば幸いです。

いがいと外国の方からは本当にこのように見られているのかもしれませんね…。
色々考えさせられます。

jquery.loadingdots.js

要するに、こんな感じにドットがアニメーションします。

Loading.
Loading..
Loading…

CSS-Tricksのスクリプトはスピードとドットの最大数がオプションで渡せましたが、
それらに加えて「Loading」の文字とドットの文字、
文字のスタイルを渡せるようにしてみました。

• DEMO ( on JS Bin)
• Download : jquery.loadingdots.zip

使い方

表示させる

シンプルな例

$("#loadingArea").loadingdots();

オプションを渡す例

$("#loadingArea").loadingdots({
    content:"LOADING",
    css:{
        fontWeight:"bold",
        color:"#336699"
    }
});

止め方

$("#loadingArea").loadingdots( "stop" );

もしくは

$("#loadingArea").loadingdots( { mode : "stop" } );

オプション

mode : String = “start”

startまたはstopを受け取って処理をスイッチします。

maxDots : Number = 4

ドットの最大数

speed : Number = 400

スピード（ミリ秒）

content : String = “Loading”

表示する文字列

dotString : String = “.”

アニメーションする文字

css : Object = { }

CSSを格納したオブジェクトリテラル

Loading Dots jQuery Plugin | CSS-Tricks の元記事では、
CSS3のWebKitアニメーションを使用した例も掲載されていました。
そちらも是非ご参考に。

Second Wind on Vimeo

少しデフォルメの効いたキャラクターが、
すごく豊かな表情と愛嬌のある動きでストーリーを綴っていきます。
背景の雰囲気も趣きがあってすばらしい！

こちらも同じ作者さんが作られたアニメーション。
ラフスケッチっぽいグレースケールなキャラクターで
独特な世界観が生み出されています。

Ian Worrelさんのブログはこちらの模様。
数多くのスケッチが、出迎えてくれます。
(E)(N)’s BLOG