コンニチハ。パンに塗り塗りジャム太郎です。
今回は技術記事になります！
あのDVDの文字が動くやつを実装してみました〜
どうです？
世代によっては懐かしくないですか？ww
このアニメーション、実は
・HTML
・CSS
・JavaScriptのみで、できてしまうのです！
【サンプルコード】
[sample.html]
・以下コードをコピペでそのまま使えます！
<!DOCTYPE html>
<html>
<head>
<title>Title Animation</title>
<style>
body {
background-color: black;
}
#container {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#title {
position: absolute;
font-size: 70px;
color: #FFCC00;
}
</style>
</head>
<body>
<div id="container">
<div id="title">Mantap</div>
</div>
<script>
const dvd = document.getElementById('title');
let x = Math.random() * window.innerWidth;
let y = Math.random() * window.innerHeight;
let dx = (Math.random() - 1.5) * 5;
let dy = (Math.random() - 1.5) * 5;
function animate() {
x += dx;
y += dy;
if (x < 0 || x > window.innerWidth - dvd.offsetWidth) {
dx = -dx;
}
if (y < 0 || y > window.innerHeight - dvd.offsetHeight) {
dy = -dy;
}
dvd.style.left = x + 'px';
dvd.style.top = y + 'px';
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>【コード解説】
[HTML]
<!DOCTYPE html>
<html>
<head>
<title>Title Animation</title>
</head>
<body>
<div id="container">
<div id="title">Mantap</div>
</div>
</body>
</html>比較的シンプルなコードにしてます
Mantapの箇所は動かしたい文字になります
[CSS]
body {
background-color: black;
}
#container {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#title {
position: absolute;
font-size: 70px;
color: #FFCC00;
}1. body セレクタ
background-color: black;- ウェブページの背景色を黒に設定します。これにより、ページ全体の背景が真っ黒になります。
2. #container セレクタ
position: fixed;- 要素の配置方法を「fixed」に設定します。これにより、要素はブラウザのウィンドウを基準に固定され、スクロールしても位置が変わりません。
width: 100vw;- 要素の幅をビューポート（ブラウザの表示領域）の幅いっぱいに設定します。「vw」はビューポート幅の単位で、100vwはビューポート幅の100%を意味します。
height: 100vh;- 要素の高さをビューポートの高さいっぱいに設定します。「vh」はビューポート高さの単位で、100vhはビューポート高さの100%を意味します。
overflow: hidden;- 要素の内容が要素の領域からはみ出した場合に、はみ出した部分を非表示にします。これにより、#container の範囲外に要素が出ても表示されません。
3. #title セレクタ
position: absolute;- 要素の配置方法を「absolute」に設定します。これにより、要素は最も近い位置指定された祖先要素（この場合は #container）を基準に配置されます。
font-size: 70px;- 要素内のテキストのフォントサイズを70ピクセルに設定します。
color: #FFCC00;- 要素内のテキストの色を黄色（#FFCC00）に設定します。
[JavaScript]
const dvd = document.getElementById('title');
let x = Math.random() * window.innerWidth;
let y = Math.random() * window.innerHeight;
let dx = (Math.random() - 1.5) * 5;
let dy = (Math.random() - 1.5) * 5;
function animate() {
x += dx;
y += dy;
if (x < 0 || x > window.innerWidth - dvd.offsetWidth) {
dx = -dx;
}
if (y < 0 || y > window.innerHeight - dvd.offsetHeight) {
dy = -dy;
}
dvd.style.left = x + 'px';
dvd.style.top = y + 'px';
requestAnimationFrame(animate);
}
animate();1. 要素の取得と初期位置・速度の設定
const dvd = document.getElementById('title');
let x = Math.random() * window.innerWidth;
let y = Math.random() * window.innerHeight;
let dx = (Math.random() - 1.5) * 5;
let dy = (Math.random() - 1.5) * 5;const dvd = document.getElementById('title');- HTMLドキュメントからIDがtitleの要素を取得し、dvd変数に格納します。これは、アニメーションさせる対象の要素です。
let x = Math.random() * window.innerWidth;- 要素の初期X座標を、ウィンドウの幅内でランダムに設定します。Math.random()は0から1の間のランダムな数値を生成し、window.innerWidthを掛けることで、ウィンドウ幅全体にわたるランダムな座標を生成します。
let y = Math.random() * window.innerHeight;- 要素の初期Y座標を、ウィンドウの高さ内でランダムに設定します。window.innerHeightはウィンドウの高さを表します。
let dx = (Math.random() - 1.5) * 5;- 要素のX軸方向の初期速度をランダムに設定します。Math.random() – 1.5は-1.5から-0.5の間のランダムな数値を生成し、5を掛けることで、速度の範囲を調整します。
let dy = (Math.random() - 1.5) * 5;- 要素のY軸方向の初期速度をランダムに設定します。
2. アニメーション関数
function animate() {
x += dx;
y += dy;
if (x < 0 || x > window.innerWidth - dvd.offsetWidth) {
dx = -dx;
}
if (y < 0 || y > window.innerHeight - dvd.offsetHeight) {
dy = -dy;
}
dvd.style.left = x + 'px';
dvd.style.top = y + 'px';
requestAnimationFrame(animate);
}x += dx;とy += dy;- 要素のX座標とY座標を、それぞれの速度(dxとdy)に基づいて更新します。
if (x < 0 || x > window.innerWidth - dvd.offsetWidth) { dx = -dx; }- 要素がウィンドウの左右の端に到達したかどうかをチェックします。到達した場合、X軸方向の速度(dx)を反転させ、要素が反対方向に跳ね返るようにします。dvd.offsetWidthは要素の幅を表します。
if (y < 0 || y > window.innerHeight - dvd.offsetHeight) { dy = -dy; }- 要素がウィンドウの上下の端に到達したかどうかをチェックします。到達した場合、Y軸方向の速度(dy)を反転させ、要素が反対方向に跳ね返るようにします。dvd.offsetHeightは要素の高さを表します。
dvd.style.left = x + 'px';とdvd.style.top = y + 'px';- 要素のleftとtopスタイルを更新し、要素を新しい座標に移動させます。
requestAnimationFrame(animate);- 次のアニメーションフレームでanimate()関数を再度呼び出すようにスケジュールします。これにより、アニメーションが継続的に実行されます。
3. アニメーションの開始
animate();animate()関数を最初に呼び出すことで、アニメーションを開始します。
このサンプルコードからアレンジもできると思います！
例えば
・背景や文字の色を変える
・文字の動く速さを変えてみる
・文字跳ね返り時に文字色を変える
など色々いじってみてください〜
今回は、HTMLファイルの中にCSSとJSを記述していますが、ご自身で必要に応じてファイルを分けてくださいね！
では、また次の記事で〜