パラパラ漫画用のjsを書いてみた
カテゴリー：javascript最近html,cssとAndroidのxmlがごちゃまぜになり始めてるMaMoTaKuです。
まだ区別はついてるはずです、はい笑
今回はパラパラ漫画ぽいものをwebで表現するときに使える「かもしれない」jsを作ってみました！
元々別の目的で作ってたものがたまたまパラパラ漫画にも応用できそうだったわけじゃないんだからね！
とりあえずDEMOでどんなものか確認を
DEMOがあるので、こちらで確認をしてみてください。
月の画像はパラパラ漫画ってワードで調べて見つけたやつなんですけど、
どこのサイトから持ってきたか忘れちゃいました、ゴメンなさい、、、
じゃ、コードの紹介でも
HTMLは以下のコードを
<input type="button" onClick="onClickImageTransform();" id="oneParaPara" value="一回だけ回転させる"><br> <input type="button" onClick="autoParaPara();" id="autoParaPara" value="自動で回転させる"><br> <input type="button" onClick="stopParaPara();" id="stopParaPara" value="自動で回転するのを止める"><br> <div id="parapara"> <div id="paraparaTop"> <div id="paraparaTopContent0" class="paraparaTop"></div> </div> <div id="paraparaBottom"> <div id="paraparaBottomContent0" class="paraparaBottom"></div> </div> </div>
CSSは以下のコードを
#parapara{
width:370px;
height:278px;
margin:50px auto;
position:relative;
perspective:1000px;
}
#parapara img{
width:100%;
}
#paraparaTop,
#paraparaBottom{
position:absolute;
left:0;
width:100%;
height:138px;
overflow:hidden;
}
#paraparaTop{
top:0;
border-radius:10px 10px 0 0;
}
#paraparaBottom{
bottom:0;
border-radius:0 0 10px 10px;
}
#paraparaTop .paraparaTop,
#paraparaBottom .paraparaBottom{
background-repeat:no-repeat;
width:100%;
height:100%;
overflow:hidden;
position:absolute;
left:0;
}
#paraparaTop .paraparaTop{
background-image:url(/stady/images/parapara/moon1.jpg);
background-position:left top;
border-radius:10px 10px 0 0;
transform-origin:50% 100%;
top:0;
}
#paraparaBottom .paraparaBottom{
background-image:url(/stady/images/parapara/moon1.jpg);
background-position:left bottom;
border-radius:0 0 10px 10px;
transform-origin:50% 0%;
botto:0;
}
JSはまず、
・jQuery
・jQuery easing
・prefixfree
・transit
が必要になります
jQueryとeasingは定番なので問題ないと思いますが、
prefixfreeとtransit
この2つのjsは初めての人もいるかと思います。
簡単に説明すると
prefixfree.jsはcss3をブラウザごとに書くときに「-webkit-」や「-moz-」「-ms-」「-o-」を自動でやってくれます！
なので、このjsは常に読み込むjsにしてもいいかもしれませんね！
※注意点として、ローカルだと動かないとゆう記事を見たことがあります。
くわしくはPrefix free CSS3のベンダープレフィックス自働付与するすご～いスクリプトをご覧下さい。
transit.jsは通常javascript内では書くことができないtransformを書けるようにしてくれます！
これがなければ今回パラパラ漫画を作ることができませんでした！ありがとう！
ものの準備が終わったのでparapara.jsを読み込もう！
もはやMaMoTaKuが書いたparapara.jsより、
上にあげたjsの紹介をもっとしたほうがいいような気がしますが、
「あえて」なにもなかったことにして、parapara.jsの紹介をさせてもらいます！！
//画像リスト
var imgLength = 30; //パラパラ画像の枚数
var timer = "";
var animateSpeed = 100; //パラパラ画像のパラパラスピード
$("#oneParaPara").removeAttr("disabled");
$("#autoParaPara").removeAttr("disabled");
$("#stopParaPara").attr("disabled" , "disabled");
//ボタンを押したら回転させる
function onClickImageTransform() {
//設定
var num = "";
var nowImageID = $("#paraparaTop .paraparaTop").attr("id").replace("paraparaTopContent" , "");
var nowContentTop = $("#paraparaTopContent" + nowImageID);
var nowContenBottom = $("#paraparaBottomContent" + nowImageID);
var contentTopHTML = "";
var contentBottomHTML = "";
//画像がすべて読み込まれたら実行
nowContentTop.css({"z-index" : "10"});
if (nowImageID == imgLength - 1) {
num = 1;
} else {
num = parseInt(nowImageID) + 1;
}
contentTopHTML += '<div id="paraparaTopContent' + num + '" class="paraparaTop" style="background-image:url(images/parapara/moon' + num + '.jpg);"></div>';
contentBottomHTML += '<div id="paraparaBottomContent' + num + '" class="paraparaBottom" style="background-image:url(images/parapara/moon' + num + '.jpg); -webkit-transform:rotateX(90deg); -moz-transform:rotateX(90deg); -ms-transform:rotateX(90deg); -o-transform:rotateX(90deg); transform:rotateX(90deg);"></div>';
//次のparaparaTopを書き出す
nowContentTop.after(contentTopHTML).transition({"rotateX" : "-90deg"} , animateSpeed , "easeInQuart" , function() {
nowContentTop.remove();
});
//次のparaparaBottomを書き出す
nowContenBottom.after(contentBottomHTML);
setTimeout(function() {
$("#paraparaBottomContent" + num).transition({"rotateX" : "0deg"} , animateSpeed , "easeOutQuart" , function() {
nowContenBottom.remove();
});
} , animateSpeed);
}
//自動で回転させる
function autoParaPara() {
$("#autoParaPara , #oneParaPara").attr("disabled" , "disabled");
$("#stopParaPara").removeAttr("disabled");
onClickImageTransform();
timer = window.setInterval(function() {
onClickImageTransform();
} , animateSpeed * 2)
}
//自動で回転するのを止める
function stopParaPara() {
$("#autoParaPara , #oneParaPara").removeAttr("disabled");
$("#stopParaPara").attr("disabled" , "disabled");
window.clearInterval(timer);
}
になります！
使う方がいじる必要があるとすれば、2行目と4行目の画像の枚数とパラパラのスピード調整ぐらいだとおもいます。
（idを変えた場合はそれに合わせて変更が必要です。）
これでパラパラ漫画が完成すると思います！
demoサイトのコードはおそらく触らないので、
上記の内容でわからない部分は頑張って感じ取ってください笑！