iBooksで本を作る時に、複数の画像を使用してgifアニメーション的なことをさせたかったので作ってみました。
クリックするとアニメーションが開始するような仕組み。
今回はJavascriptを使用しています。
CSS3でもできそうでしたが、JSの方がファイルの管理は楽で流用も簡単だと思ったので、こちらを使用。
style/test.css
@charset "utf-8"; html,body { padding:0; margin:0; } .img { visibility:hidden; position: absolute; top:0; left:0; } #clickarea { position:relative; }
text/test.html
version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="ja" xml:lang="ja">
<head>
<title>テストページtitle>
<link href="../style/test.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=768, height=1024"/>
head><body>
<div id="clickarea">
<div>
<img src="../images/test001.jpg" />
div>
<div class="img anime1">
<img src="../images/test001.jpg" />
div>
<div class="img anime1">
<img src="../images/test001_01.jpg" />
div>
<div class="img anime1">
<img src="../images/test001_02.jpg" />
div>
div>
<script src="../js/test.js" type="text/javascript">script>
body>html>
js/test.js
var count = 0; var anime_flg = 0; //クリック連打防止用 var speed = 500; //アニメーションの速さ(ミリ秒単位) function onClick() { if(anime_flg != 0){ return; } count = 0; anime_flg = 1; setTimeout('onTimer()',speed); } function onTimer() { var imgs = document.getElementsByClassName("img"); var imgs2 = document.getElementsByClassName("anime1"); count++; if(count < imgs2.length - 1){ setTimeout('onTimer()',speed); }else{ anime_flg = 0; } for (var i=0; i < imgs.length; i++) { imgs[i].style.visibility = "hidden"; } for (var i=0; i < imgs2.length; i++) { if(count == i){ imgs2[i].style.visibility = "visible"; } } } var clickarea = document.getElementById('clickarea'); clickarea.addEventListener('click', onClick);
javascript を使用する時は、opf ファイルに、「properties="scripted"」の記述が必要になる。ココが重要なポイント!
<item id="text.test.xhtml" href="text/test.xhtml" media-type="application/xhtml+xml" properties="scripted" />