JavaScript 入門サンプル2
インタラクティブな事例
Keyboard
キーボードの [A] [D] [W] [X] や カーソルによって画面内の要素を移動させるサンプルです。要素の移動は、CSSの position: absolute; を前提に、キーボードイベントの発火に応じて top と left の値を変更する・・というシンプルな方法で実現しています。
Mouse1 → DEMO
マウスの位置情報を用いたインタラクティブなサンプルを紹介します。この事例では、画面上のクリックした位置にBOXが移動します。
- index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Basic Sample</title> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body > <div id="container"> <div id="box"> BOX </div> </div> </body> </html>
- style.css
#container{ position:relative; width:100%; height:100%; background-color:maroon; } #box { position:absolute; width:100px; height:100px; background-color:silver; }
- script.js
window.onload = function(){ var field = document.getElementById('container'); field.addEventListener('click', FitElement, false); } function FitElement(event){ var obj = document.getElementById('box'); obj.style.top = (event.clientY - 50) + "px"; obj.style.left = (event.clientX - 50) + "px"; }
Mouse2 → DEMO
先の事例の応用で、クリックした場所へBOXがアニメーションします。まずはアニメーションする仕組みをソースコードから読み取って下さい。
- index.html
事例1と同様
- style.css
事例1と同様(Boxのサイズが異なるだけ)
- script.js
var dx = 0; var dy = 0; var x = 100; var y = 100; window.onload = function(){ var timer = setInterval(AnimateElement, 5); var field = document.getElementById("container"); field.addEventListener("click", InitPosition, false); } function InitPosition(event){ dx = ( event.clientX - x )/50; dy = ( event.clientY - y )/50; } function AnimateElement(){ var obj = document.getElementById('box'); if( x < 0 || window.innerWidth - 40 < x ) dx *= -1; if( y < 0 || window.innerHeight - 40 < y ) dy *= -1; x += dx; y += dy; obj.style.left = x + 'px'; obj.style.top = y + 'px'; }
- 付記:パフォーマンスを意識したアニメーションを実装する場合は、setInterval ではなく requestAnimationFrame を利用します。
Mouse3 → DEMO
上の事例を配列変数を使ってさらに応用します。
- <li>タグに書かれた複数の要素をアニメーションさせます。
- 画面をクリックと、すべての要素が一旦その位置に初期化されます。
- index.html
<!DOCTYPE html> <html lang="ja"> <head> <title>Basic Sample</title> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body > <div id="container"> <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> </ul> </div> </body> </html>
- style.css
*{ margin:0; padding:0; } #container{ position:relative; width:100%; height:100%; background-color:maroon; } li { position:absolute; width:20px; height:20px; list-style-type:none; background-color:silver; }
- script.js
// GLOBAL VALUE var dx = new Array(100); var dy = new Array(100); var x = new Array(100); var y = new Array(100); var obj; window.onload = function(){ var timer = setInterval(AnimateElement, 10); var field = document.getElementById('container'); field.addEventListener('click', InitPosition, false); obj = document.getElementsByTagName('li'); // initialize for( i=0 ; i<obj.length ; i++){ x[i] = 100; y[i] = 100; dx[i] = i; dy[i] = i; } } function InitPosition(event){ for( i=0 ; i<obj.length ; i++){ x[i] = event.clientX; y[i] = event.clientY; dx[i] = Math.floor ( Math.random()*21 - 10 ); dy[i] = Math.floor ( Math.random()*21 - 10 ); } } function AnimateElement(){ for( i=0 ; i<obj.length ; i++){ if( x[i] < 10 || window.innerWidth - 30 < x[i] ) dx[i] *= -1; if( y[i] < 10 || window.innerHeight - 30 < y[i] ) dy[i] *= -1; x[i] += dx[i]; y[i] += dy[i]; obj[i].style.left = x[i] + 'px'; obj[i].style.top = y[i] + 'px'; } }
- 付記:パフォーマンスを意識したアニメーションを実装する場合は、setInterval ではなく requestAnimationFrame を利用します。