作ってみた。解説画面の元になるパターンとscript。
mp4の動画はサンプル動画。動画に重ねてイメージと、textを出せるかが、今回の試み。
なお、重ね枚数、textのJavascriptはこれには、組み込まれていません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<LINK rel="SHORTCUT ICON" href="img/name.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="たっちゃん,studio。">
<title>my_test</title>
<link rel="stylesheet" href="my_test.css" type="text/css">
</head>
<body>
<!-- stato -->
<span id="box01">
<table><tr><td id="my1td1"></td><td></td><td>0000</td></tr>
<tr><td></td><td id="my1td4"><figure><figcaption>Go Go Unatyan!!</figcaption>
<video controls src="imge/una00.mp4" width="640" autoplay muted="false">
</video></figure></td><td></td><tr></table></span>
<span id="box02">
<table><tr><td id="my2td1"></td><td></td></tr>
<tr><td></td><td><span id="myt2_1"><img src="imge/gall.png" width="128" height="128"></span></td></tr></table>
</span>
<span id="box03">
<table><tr><td id="my3td1"></td><td></td></tr>
<tr><td></td><td><span id="myt3_1"><img src="imge/man1.png" width="128" height="128"></span></td></tr></table>
</span>
<span id="box04">
<table><tr><td id="my4td1"></td><td></td></tr><tr><td></td><td>
<span id="myt4_1"><font size="6"><b>テキスト</b>を<font color="#f00"><b>変</b>え</font>られる。</font></span>
</td></tr></table></span>
<div id="test_my0">test0</div>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<div id="test_my1">test1</div>
<!-- end -->
</body>
</html>
CSS
@charset "UTF-8";
/* ver. 1_00(test) */
body {
margin: 1cm;
background:#00bbff;
}
#test_my0 {
color: red;
}
#box01 {
background-color: #1995ee;
position: fixed;
top: 0;/* タグによる位置の既定の位置に配置無視 */
left: 0;/* 無視 */
/*width: 64px;
height: 64px;*/
}
#my1td1 {
width: 128;
height: 128;
}
#box02 {
/*background-color: #ff6a00;*/
position: fixed;
top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
left: 0;/* 既定の位置 */
/*width: 64px;
height: 64px;*/
}
#my2td1 {
width: 60px;
height: 280px;
}
#box03 {
/* background-color: #ffd800; */
position: absolute;
top: 0;/* タグによる位置の 絶対座標の位置 スクロール*/
left: 0;/* スクロール */
/*width: 64px;
height: 64px; */
}
#my3td1 {
width: 550px;
height: 280px;
}
#box04 {
/* background-color: #26b138;*/
position: fixed ;
top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
left: 0;/* 同じ位置 */
/* width: 58px;
height: 58px; */
}
#my4td1 {
width: 200px;
height: 350px;
}
#test_my1 {
color: red;
}
手抜きや。機能試験言うやつ。自由にお使いください。