axeaseはキャンバス視差アニメーションを作成するためのシンプルなJavascriptライブラリ。

Axeaseライブラリ

<script type="text/javascript" src="js/axease.solo.0.2.js"></script>

<canvas id="one"></canvas>

canvas {
  width: 100%;
  height: auto;
}

// Preload our content
_$.createImage([{
  id: "bg",
  url: "bokeh-bg.png"
}, {
  id: "fg",
  url: "bokeh-fg.png"
}], onload);

function onload() {

  // Push the screens (canvas) to Axease
  _$.ax.addElement({
    "screen": "#one", // Canvas selector
    "sprites": [{
      spriteId: "bg",
      scroll: {
        below: { y: 0.2 }, // 1 - bottom of canvas
        center: { y: 0 }, // 0 - middle of canvas
        above: { y: -0.2 } // -1 top of canvas
      }
    }, {
      spriteId: "fg",
      scroll: {
        below: { x: -0.8, y: 0.8 }, // 1 - right/bottom of canvas
        center: { x: -0.4, y: 0.4 }, // 0 - middle of canvas
        above: { x: 0, y: 0 } // -1 left/top of canvas
      }
    }]
  });

  ...

  _$.ax.addScreen({
    "screen": "#four",
    "sprites": [{
      spriteId: "bg",
      time: {
        pingpong: true,
        duration: 10, //s
        frames: [[2.0, 0], [-2.0, 0]]
      }
    }]
  });

function onload() {
  // Your animations here
  ...

  // Start the tick!
  _$.start();
}

MIT

• Tag
• Javascript