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

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

「CreateJS」というJavaScriptのライブラリで作られたとあるサイトのアニメーションがとてもステキだったので、勉強もかねて自分のサイトに適用してみました。

「CreateJS」とは

「CreateJS」はHTML5でのリッチコンテンツを制作するためのJavaScriptライブラリで、個人・商用、どちらでも無償で利用できます。「CreateJS」は4つのJavaScriptライブラリで構成されており、それぞれの得意な内容を利用することができます。

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

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

今回「CreateJS」で作ったもの

円状のシェイプをランダムに複数表示して一定の動きでアニメーションする、というものを作ってみました。

CreateJS 円状のシェイプをランダムに複数表示
円状のシェイプをランダムに複数表示

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をマイナスにしています。数値は任意となります。

Simplicityに適用する

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を背景全体に表示するために記述しています。

まとめ

  • 「CreateJS」はHTML5でのリッチコンテンツを制作するためのJavaScriptライブラリで、個人・商用、どちらでも無償で利用できる。
  • footer.phpにcanvasを記述する。
  • footer-insert.phpに元になる「CreateJS」と作成したjsを読み込む。
  • style.cssにcanvasのスタイルを記述する。

本当はランダムに配置したシェイプにイベントを登録して、なんらかの動きを持たせたかったのですが、ランダムに配置しているシェイプ自身それぞれにうまくイベントを登録することができず、表示だけにとどまりました。

「CreateJS」は手軽に使えるいろいろ便利な機能があるので、気になった方はぜひ挑戦してみてください。シェイプはいろいろ変えて行こうと思います。

今回のアニメーションを実装するにあたり、参考にしたサイトは下記になります。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!