今回は唐突にパラパラ漫画風アニメーションを作成してみました。
上はパラパラ漫画用に用意した8枚のイラスト。
※背景色を梨のPNGファイルにした方が良かったですね（反省）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ※viewportの設定可能要素 -->
<title>パラパラ漫画ページ</title>
<style>
body {
overflow: hidden; /* ページ外の要素を表示しない */
background-color: #fcfca7; /* ページ背景色を設定 */
}
/* スライドショーのコンテナのスタイル */
.para-container {
position: relative;
max-width: 283px; /* スライドショーの幅を調整 */
/* 今回作成した画像は幅も高さも283px */
margin: 0 auto;
}
/* 画像のスタイル */
.paraSlides {
display: none; /* 最初は画像を非表示に */
}
</style>
</head>
<body>
<div class="para-container">
<!-- 画像を追加。ここでは8枚利用 -->
<div class="paraSlides">
<img src="links/frame1.jpg" alt="画像1">
</div>
<div class="paraSlides">
<img src="links/frame2.jpg" alt="画像2">
</div>
<div class="paraSlides">
<img src="links/frame3.jpg" alt="画像3">
</div>
<div class="paraSlides">
<img src="links/frame4.jpg" alt="画像4">
</div>
<div class="paraSlides">
<img src="links/frame5.jpg" alt="画像5">
</div>
<div class="paraSlides">
<img src="links/frame6.jpg" alt="画像6">
</div>
<div class="paraSlides">
<img src="links/frame7.jpg" alt="画像7">
</div>
<div class="paraSlides">
<img src="links/frame8.jpg" alt="画像8">
</div>
</div>
<script>
// スライドショーの設定
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("paraSlides");
// すべての画像を非表示にする
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// 次の画像を表示
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
// 0.2秒ごとに次の画像を表示
setTimeout(showSlides, 200);
// 200ミリ秒（0.2秒）ごとに切り替える場合
// 1秒なら1000ミリ秒
}
</script>
</body>
</html>
※viewportの設定可能要素
width=device-widthで、表示領域の幅を端末画面の幅に合わせる。
initial-scale=1は初期のズーム倍率。
これらの設定で、どのデバイスでも表示領域が合い、
width（横幅）
device-widthを指定すると、端末の幅に合わせる。
最小幅をmin-width、最大幅をmax-widthで指定。
height（縦幅）
initial-scaleは、ページロードした時の倍率を指す。
minimum-scale〜maximum-scaleで指定可能。
デフォルトは表示領域にページがフィットするよう、
自動算出される。
initial-scaleを指定しない場合は、initial-scale＝1。
maximum-scale（最大倍率）
minimum-scale（最小倍率）
maximum-scaleは最大拡大倍率、minimum-scaleは最小縮小倍率。
デフォルト値は
maximum-scaleは5.0、minimum-scaleは0.25。
user-scalable （ズーム操作の可否）
user-scalableは、ユーザーがズームできるかの指定要素。
デフォルトはuser-scalable=yes。
yesで許可、no（または0）でズームができないように指定。
画像は上の様にループする展開で用意しています。
