「CreateJS」を勉強してWordPressテーマのSimplicityに適用してみた

「CreateJS」を構成するライブラリ

• EaselJS：HTML5キャンバス要素で作業するJavaScriptライブラリ。
• TweenJS：JavaScriptのプロパティをアニメーション化するためのJavaScriptライブラリ。
• SoundJS：効率的にウェブ上のオーディオを操作できるJavaScriptライブラリ。
• PreloadJS：画像、音声、JS、データなどを事前にロードすることがきるJavaScriptライブラリ。

JS

JSのコードは下記のようになります。

// 読み込みが終わってから初期化
window.addEventListener("load", init);

function init() {

    //canvasを画面いっぱいに
    var canvas = document.getElementById("myCanvas");
    var stage = new createjs.Stage(canvas);
    stage.canvas.width = window.innerWidth;
    stage.canvas.height = window.innerHeight;

    // 初期化
    var stage = new createjs.Stage("myCanvas");

    // ループ
    for (var i = 0; i < 50; i++) {

        // シェイプを作成
        var shape = new createjs.Shape();
        stage.addChild(shape);

        // ランダムで配置する準備
        var x = stage.canvas.width * Math.random();
        var y = stage.canvas.height * Math.random();

        // 指定した範囲でのサイズ表示
        var circleSize = (Math.random() * ((40 + 1) - 20)) + 20;

        //シェイプのカラーと形を指定してランダム表示
        shape.graphics.clear()
            .beginFill("#EFEFEF")
            .drawCircle(x, y, circleSize);

        // アニメーション移動
        createjs.Tween.get(shape,{loop: true}) // ターゲットを指定
            .to({x: 300, y: 500, alpha: 0.5}, 40000)
            .to({x: 300, y: 0}, 40000)
            .to({x: 0,  y: 500}, 40000)
            .to({x: 0,  y: 0}, 40000);

    }

    // tick イベントを監視
    createjs.Ticker.addEventListener("tick", handleTick);
    function handleTick() {
        // Stageを更新
        stage.update();
    }

}

createjs.Tween.getでtoを4つ指定することで、4つの動きを時間で変化させているのがポイントです。1つ目のtoで左上から、次は下から、次は右上から、そしてまた下からとアニメーションして「loop: true」で繰り返しています。

HTML

HTMLは下記のようになります。

<canvas id="myCanvas" width="960" height="500"></canvas>

canvas要素でアニメーションをレンダリングしています。

CSS

CSSは下記のようになります。

/************************************
** キャンバス
************************************/
canvas#myCanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
}

背景として使うためにz-indexをマイナスにしています。数値は任意となります。

footer.php

footer.phpにある「</body>」の上に下記の記述を行いました。

<?php if(!is_mobile()): ?>
<canvas id="myCanvas" width="960" height="500"></canvas>
<?php endif; ?>

今回はPCのみに適用するので、「!is_mobile」としました。

footer-insert.php

footer-insert.phpに下記の記述を行いました。

<?php if(!is_mobile()): ?>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/dist/js/canvas.js"></script>
<?php endif; ?>

元になる「CreateJS」と、今回作成したjsを「canvas.js」として読み込んでいます。今回はPCのみに適用するので、「!is_mobile」としました。

style.css

style.cssに下記の記述を行いました。

/************************************
** キャンバス
************************************/
canvas#myCanvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
}

canvasを背景全体に表示するために記述しています。