JavaScriptでアニメーションを作る

ちょっと前まではFlashでのアニメーション制作が主流でしたが、タイムラインの編集や差し込む画像の変更などの、デザイナーの手間が結構負担でした。しかし、Javascriptならばその手間も省けることができます。

■タイムラインアニメーションの作成手順
jQueryを使用する
…アニメーション自体はanimation.jsに記述。その他のHTMLやCSSには、以下のコードを参考に各自必要に応じてカスタマイズしてみて下さい。

アニメーションのためのHTMLの準備

●HTML
<!– index.html –>
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<title>JavaScriptタイムラインアニメーションのサンプル</title>
<link rel=”stylesheet” href=”common/css/style.css”/>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=”text/javascript” src=”common/js/animation.js”></script>
</head>
<body>
<div id=”anim”>
<img id=”anim_bg_1″ src=”common/img/anim_bg_1.jpg” alt=”" />
<h1>
<img id=”anim_concept_1″ src=”common/img/anim_concept_1.png” alt=”Flash-like Animation” />
<img id=”anim_concept_2″ src=”common/img/anim_concept_2.png” alt=”by JavaScript” />
</h1>
<p>
<img id=”text_bg_1″ src=”common/img/black_bg.png” />
<img id=”anim_text_1″ src=”common/img/anim_text_1.png” alt=”JavaScriptでアニメーションを作るのは…” />
</p>



(以下省略)

アニメーションのためのCSSの準備

●CSS
@charset “UTF-8″;
/* style.css */

/* アニメーションの枠 */
#anim{
width: 592px;
height:400px;
overflow: hidden;
position: relative;
}

/* topやleftなどの絶対位置でアニメーションさせる */
#anim img, #anim p, #anim h3{
position:absolute;
}



(以下省略)

HTMLのコードでは、すべてが画像で表現できるコードに。CSSでは、アニメーションの枠の要素にを指定。

更にこれにJavascriptのコードを絡めると。

アニメーションのためのJavascript

●Javascript
$(function() {
/*========================
DOMElements
========================*/
var bg_1 = $(‘#anim_bg_1′);
var bg_2 = $(‘#anim_bg_2′);
var bg_3 = $(‘#anim_bg_3′);
var concept_1 = $(‘#anim_concept_1′);
var concept_2 = $(‘#anim_concept_2′);
var text_1 = $(‘#anim_text_1′);
var text_2 = $(‘#anim_text_2′);
var text_3 = $(‘#anim_text_3′);
var text_bg_1 = $(‘#text_bg_1′);
var text_bg_2 = $(‘#text_bg_2′);
var text_bg_3 = $(‘#text_bg_3′);

/*========================
Main Function
========================*/



(以下省略)

(参考:DX.univ)

コード内にはtimelineの配列があり、その中のオブジェクトとしてアニメーションの動きを指定。グループ化し完結することによって、動きの調整も可能になります。

このページの先頭へ