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

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