![見出し画像](https://assets.st-note.com/production/uploads/images/104346060/rectangle_large_type_2_89aec619c53f0daeb50a6449f96adca9.jpeg?width=1200)
JavaScriptを使ったアニメーションの実装方法と3つの事例
JavaScriptのアニメーションを作成することで、目を引くウェブサイトを作成することができます。以下は、人々を驚かせるかもしれない、いくつかのアイデアです。
サンプルページはこちら▼
JavaScriptの4つのアニメーション例
キャンバスを使用したアニメーション:HTML5のキャンバスを使用して、色彩豊かなグラフィックスや複雑な形状を作成し、それらをアニメーション化することができます。
CSS3トランジションとアニメーション:CSS3のトランジションとアニメーションを使用して、テキストや画像などの要素を移動、フェードイン/アウト、回転などの効果を追加することができます。
WebGLを使用した3Dアニメーション:WebGLを使用することで、ブラウザで本格的な3Dグラフィックスを作成することができます。3Dオブジェクトを回転、スキュー、ズームなどのアニメーションを追加することもできます。
SVGアニメーション:SVGを使用して、ベクターイメージを作成し、それをアニメーション化することができます。SVGのパスをアニメーション化することで、独創的なエフェクトを作成することもできます。
キャンバスアニメーション
このアニメーションは、キャンバスにボールを描画し、そのボールを移動させます。 setInterval() メソッドを使用して、 draw() 関数を毎秒10回実行します。
<canvas id="myCanvas"></canvas>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 50;
let y = 50;
let dx = 5;
let dy = 5;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
x += dx;
y += dy;
if (x > canvas.width - 20 || x < 20) {
dx = -dx;
}
if (y > canvas.height - 20 || y < 20) {
dy = -dy;
}
}
setInterval(draw, 10);
CSS3トランジションアニメーション:
このアニメーションは、マウスをオーバーすると、 myDiv 要素が360度回転するようになっています。 transition プロパティを使用して、回転アニメーションに2秒かかるように指定しています。
サポートお願い致します!