これまでの課題
以上の3題でした。自然に近い揺れの表現などを実現させるには参考になります。
今回はホームページやブログを表現するとき、表現する文書のデザインを指定するCssにおけるanimation機能を使って揺れる短冊の作成法を取り上げます。
揺れる短冊の作成法
概要
- アニメーションの一例
- 図の重ね合わせ
- 図や文字表示の切り替え法
- 音楽の再生とイベントの利用
- 再生とボリュームの設定
アニメーションの一例
要素をアニメーションさせるCssの機能にTransitionとAnimationがあります。今回、Animationを使用します。animationではtransform rotateとrotateYを使って2種類の回転を制御します。
図の重ね合わせ
重ね合わせをするにはdiv要素において、position relative/absoluteとmargin-left/topを指定する方法がありますが、ここでは後者を採用しました。
図や文字表示の切り替え法
動的な表現はCssにより制御され、その属性パラメーターを設定しなおすことにより図や文字の表示を変更します。メッセージを切り替えるにはJavaScriptの中でinnerHTML要素の中身を根こそぎ変更します。
音楽の再生とイベントの利用
音楽を再生するにはaudio要素にてcontrols指定し、表示されたユーザー・インターフェースの再生ボタンを押下します。
連続再生をするために、addEventListenerにendedを指定して終了イベントを起動して次のBGMと短冊に記すメッセージを切り替えます。
再生とボリュームの設定
上記で説明したイベント関数のなかで再生する音声オブジェクトのsrc属性を設定し、異なる録音レベルを調整すべく適切なボリューム値を設定します。
HTMLサンプルコード
<!DOCTYPE html> <!-- 課題7 揺れる短冊にメッセージ -->
<html> <!-- 令和三年 盛夏 summerVacation -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- スマホ対策 -->
</head>
<style type="text/css">
#sticknote { /* 吊り点の回りを回転：風鈴を揺らす */
animation: swing0 linear 10s infinite;
animation-play-state: running; /* running, paused */
transform-origin: center top; /** 中央 上 **/
}
@keyframes swing0 { /* アニメーション揺れの詳細を指定 */
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
#oblongcrd { /* Y軸の回りを回転：短冊のひらひら感を出す */
animation: swing1 linear 7s infinite;
animation-play-state: running; /* running, paused */
}
@keyframes swing1 { /* アニメーション回転の詳細を指定 */
0% { transform: rotateY( 0deg); } /* 0 */
25% { transform: rotateY( 75deg); } /* 90 */
50% { transform: rotateY( 0deg); } /* 180 */
75% { transform: rotateY( -75deg); } /* 270 */
100% { transform: rotateY( 0deg); } /* 360 */
}
</style>
<body>
<DIV id="top" style="width:320px; height:580px; margin:0 auto; background:cyan; border:0px solid pink;">
<Div id="sticknote" style="text-align:center; padding-top:20px; width:320px; height:500px; border:0px solid darkgreen; overflow:hidden;">
<img id="windchime" width="180" height="200" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/08/furin2a.png" style="margin-top:5px; opacity:0.7;">
<div id="oblongcrd" width="180" height="326" style="font-weight:bold;">
<img width="180" height="326" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/08/furin2c.png" style="margin-top:-32px; opacity:0.5;">
<div id="c9" style="margin-left:2px; margin-top:-244px; font-size:24px">🍨</div>
<div id="c0" style="margin-left:1px; margin-top: 6px; font-size:24px">か</div>
<div id="c1" style="margin-left:-9px; margin-top: 7px; font-size:24px">き</div>
<div id="c2" style="margin-left:-22px; margin-top: 2px; font-size:24px">氷</div>
<div id="c3" style="margin-left:-45px; margin-top: 5px; font-size:24px"></div>
</div>
</Div>
<div style="width:300px; height:20px; text-align:center; margin-top:-500px; font-size:22px; color:darkred; font-weight:normal; border:0px solid blue;" id="topmsg">揺れる短冊にメッセージ</div>
<div style="width:300px; margin-left:10px; margin-top:483px; font-size:14px; font-weight:normal; border:0px solid red;">開始↴<span style="padding-left:162px;">TacM, Ver0.02</span></div>
<div style="text-align:center; margin-top:0px; border:0px solid pink;"><audio id="windbell" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/07/furin_19.mp3" controls controlsList="nodownload" style="width:300px"></audio></div>
</DIV>
</body>
<script type="text/javascript"> //ここから < /script > まで動的なプログラミング本体
const events = ["かき氷", "花火大会", "夏まつり", "麦藁帽子", "ひまわり"]; //イベント名称
const emoji5 = ["🍨", "🎆", "🎊", "👒", "🌻"]; //短冊に載せる絵文字
const topColor = ["cyan", "beige"]; //BackGround color
const topMusic = ["07/furin_19.mp3", "08/135.mp3", 1, 0.5]; //BackGround Music, Volume調整用
var i=0; //繰り返しカウンター
console.log("W=", window.screen.width, " H=", window.screen.height, events.length); //画面サイズをデバッグのため表示
var musicObj = document.getElementById("windbell"); //何度も利用するオブジェクトを置き換えておく
musicObj.addEventListener('ended', function(){ //音楽の再生完了を知らせる
if(++i < events.length){ //繰り返す回数
document.getElementById("top").style.background = topColor[i % 2];
document.getElementById("c9").innerHTML = emoji5[i]; //短冊に載せる絵文字
//document.getElementById("c3").innerHTML = ""; //短いメッセージの補正 （拡張時、要）
for(var j=0; j<events[i].length; j++){ //短冊に記すメッセージ
//console.log("c"+j, i, j, events[i][j]);
document.getElementById("c"+j).innerHTML = events[i][j]; //メッセージを切り替える
}
musicObj.src = "https://aidesign.lolipop.jp/wp-content/uploads/2021/"+topMusic[i%2];
musicObj.play(); //風鈴を再鳴動
musicObj.volume = topMusic[i%2+2]; //音量制御
//console.log(i, events[i], events[i].length, musicObj.src, topColor[i % 2], topMusic[i%2+2]);
}
else{document.getElementById("topmsg").innerHTML="終了";} //終わりの処理
}); //イベント関数を閉じる
</script>
</html>
動作例
動作の始まりは風鈴（ふうりん）の音の再生ボタン（▶）を押すことです。
🍨
か
き
氷
揺れる短冊にメッセージ
開始↴TacM, Ver0.02
オリジナルへの改訂
動作するひな型があってもオリジナル作品を作成するのは容易ではありません。プログラミングコードには冗長度を許しており、見やすく後で改訂しやすいコードが望まれます。そのため、スペースや改行コードがやたら挿入されています。これらはなくても問題ありませんが、価値の低いコードになります。
理想的なコードにするには経験を積まなくてはなりません。
それはおいおい力が付いて可能になるのでとりあえずは思うような結果の動作になることが大切です。
また、基本的な動作不良は論外ですが、表示位置などはブラウザごとに僅かに異なることがあります。また、クッキーやキャッシュは動作スピードを向上してくれますがプログラムコードや画像を修正したのにすぐに反映されないことがありとまどうばかりです。まずはローカル環境での動作を目指しましょう。