検索
前回、パラパラアニメを作る機会があったのでライブラリとして作成しました。 『jQueryでコマ撮りパラパラアニメ作ってやんよ!!!』 どうせならもうちょっと汎用性の高い物にできたら良いなと思ったのでカスタマイズしてみる
無限ループ型タイプ
前回作ったコマ撮りした画像をループさせパラパラアニメにさせた物がこちら で、そのスクリプトがこちら
var width = 134; //表示させたいエリアの幅（px）
var height = 120; //表示させたいエリアの高さ（px)
var fps = 5; //フレームレート（フレームス パー セコンド）
var reFlg = false;
var onceFlg = 1;
var slotImage = '.animation img'; //スロットのクラス名
var imgSrc = 'img/'; //画像の設定
var imgEx = '.jpg'; //画像の設定
var current = 0; //画像の現在の番号
var slotMax = 49; //画像の最大枚数
//インターバル指定と表示画像の指定
$(document).ready(function (){
//1秒内に回すフレームの値（1/30*1000なら1秒間に30コマ切り替える）
var interval = 1/ fps * 1000;
slotImg = 0; // 画像の初期設定値
for ( i = 0; i < current; i++){
slotImg = i;
}
animation = setInterval(slotEvent, interval);
});
//スロットのイベント
function slotEvent(){
$(slotImage).attr("src", imgSrc + slotImg + imgEx);
slotImg ++; //画像の読み込み位置
if(slotImg >= slotMax){
//条件から外れたらanimation_hのインターバル値をクリア
if(reFlg) clearInterval( animation ); //onceFlgで繰り返しreFlgで停止
slotImg = 0; //再読み込み画像の指定
};
};
詳しい仕様については前回の記事を参考にしていただきたいのですが、永遠ループさせるか、用意した画像が最後まできたら停止かのどちらかの処理がユーザーの任意で制御できないので、
今回はコンテンツ内の指定箇所でアニメーションを停止できる
スクロール値制御タイプ
永遠と繰り返されるアニメを指定されたポイントで停止できる様にしたい場合の追加設定
//現在のスクロール値をリアルタイムで表示
$(function() {
$(window).scroll(function(){
$("#hoge").text("scrollTop" + $(this).scrollTop());
});
});
//グローバル変数設定に追加
var slotStop = 500; //1番目の停止px位置
var stopImg = 0; //停止時の画像番号
//スロットイベントの追加
function slotEvent(){
var scrollTop = $(this).scrollTop(); //現在のウィンドウ縦スクロール値
$(slotImage).attr("src", imgSrc + slotImg + imgEx);
slotImg ++; //画像の読み込み位置
if(slotImg >= slotMax){
//条件から外れたらanimation_hのインターバル値をクリア
if(reFlg) clearInterval( animation ); //onceFlgで繰り返しreFlgで停止
slotImg = 0; //再読み込み画像の指定
};
if(scrollTop >= slotStop){
$(slotImage).attr("src", imgSrc + stopImg + imgEx);
if(onceFlg) clearInterval( animation ); //onceFlgで繰り返しreFlgで停止
}
};
これでページ最上部から設定値500pxまでスクロールしたらアニメーションがストップします。
完成デモ01
上記のスクロール値制御タイプのアニメーションのデモがこちらウィンドウ別自動制御タイプ
前者のパターンでは制作側の任意で停止箇所を指定できるが、表示ウィンドウのサイズによってはアニメーションが動いている事が認識できずに停止してしまったりと、閲覧者の環境によって挙動による効果が異なるデメリットの対応版としてあらゆるサイズのウィンドウで閲覧している場合でも一定の位置で停止させるパターンの追加記述スクロール値とウィンドウの縦幅を表示
$(function() {
$(window).scroll(function(){
$("#hoge").text("scrollTop" + $(this).scrollTop() + "windowHight" + (window.innerHeight));
});
});
このfunctionで現在開いてるブラウザの最上位置からのスクロール値とウィンドウの縦幅の値が表示されます。
アニメーション制御追加スクリプト
var stopTime = 3000; //①
slotStop = 1000 - window.innerHeight; //②
flag = true; //③
function flgChange(){
flag = false;
}
- ①で現在ウィンドウで表示されている最下部からスロットが見えた後に止まるインターバルの設定(1秒 = 1000)。
- ②でウィンドウ最上部から対象アニメーションまでのpx値を設定
- ③でスロットイベントのループ状態から停止トリガーとなるfunctionの記述
スロットイベント記述
function slotEvent(){
var scrollTop = $(this).scrollTop(); //現在のウィンドウ縦スクロール値
$(slotImage).attr("src", imgSrc + slotImg + imgEx);
slotImg ++; //画像の読み込み位置
if(slotImg >= slotMax){
//条件から外れたらanimation_hのインターバル値をクリア
if(reFlg) clearInterval( animation ); //onceFlgで繰り返しreFlgで停止
slotImg = 0; //再読み込み画像の指定
};
if(scrollTop >= slotStop){
setTimeout(flgChange , stopTime);
if(flag == false){
$(slotImage).attr("src", imgSrc + stopImg + imgEx);
if(onceFlg) clearInterval( animation ); //onceFlgで繰り返しreFlgで停止
}
}
};
