LogoMark.png

JavaScript/Sample2

JavaScript 入門サンプル2

インタラクティブな事例

Keyboard

キーボードの [A] [D] [W] [X] や カーソルによって画面内の要素を移動させるサンプルです。要素の移動は、CSSの position: absolute; を前提に、キーボードイベントの発火に応じて top と left の値を変更する・・というシンプルな方法で実現しています。

Mouse1 → DEMO

マウスの位置情報を用いたインタラクティブなサンプルを紹介します。この事例では、画面上のクリックした位置にBOXが移動します。




Mouse2 → DEMO

先の事例の応用で、クリックした場所へBOXがアニメーションします。まずはアニメーションする仕組みをソースコードから読み取って下さい。

Mouse3 → DEMO

上の事例を配列変数を使ってさらに応用します。

PAGES

GUIDE

TOOL

DATA

Last-modified: 2021-05-28 (金) 19:45:04