$(function(){
	var id  = "chara"; // ターゲット
	var width  = 20; // 1コマの幅
	var height = 34; // 1コマの高さ
	var fps    = 15;
	var frame = 0;
	var max_frame = 4; // 総コマ数
	var onceFlg = false;

	var interval = 1/fps*1000;
	animation = setInterval(intervalEvent, interval);

	function intervalEvent(){
		$("#"+id).css({
			"background-position-x" : -width * frame +"px" // 1コマづつ右にずらしていく
		});
		frame++;
		if(frame>=max_frame){
			if(onceFlg) clearInterval( animation );
			frame = 0;
		};
	};
});

1コマづつ横に並べた、横長スプライトシートの場合の例です。
縦に並べた画像の場合は15行目を編集する必要があるので注意。

$(function(){
	// preload images
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery("<img>").attr("src", arguments[i]);
		}
	};
	$.preloadImages("./img/hoge1.png","./img/hoge2.png","./img/hoge3.png");
});

要素をアニメーションさせて印象的に見せる「動きのあるメインビジュアル」は以前まで主にFlashが使われていましたが、最近ではJavascriptで実装されているものが増えてきています。Javascriptを利用したアニメーションは、jQueryとEasing Pluginを使うことで比較的簡単に個々の動きをつけることができます。

個々に設定したアニメーションを順番に再生するために、今まで自分はdelay()やコールバックを利用していましたが、Web Designing（2013.03）にjQueryのDeferredオブジェクトを利用して関数を順番に実行する方法が載っていたので処理の流れを確認するためメモを兼ねてコードを自分なりに整理してみました。

個人的に今回のポイントとなるのはjQuery.Deferredとスキップボタンに使用するstop()。
調べてみるとstop()の引数には実は色々使える機能がありました。以下のコードではstop()を利用してアニメーションの最後のコマへとジャンプさせています。

+more read

jQueryを利用して画像を全画面にフィットさせる方法。
cssによるbackground指定ではなく、htmlに記述した画像をフィットさせてz-indexで下に敷く形をとっています。

【html／css】

<img src="./img/XXXXX.jpg" width="100%" height="100%" id="bg" />

#bg {
	position: fixed;
	z-index: -1;
}

【js】

$(function(){
	setSize();
	$(window).resize(function(){
	   setSize();
	});
});

function setSize() {
	//画像サイズ指定
	var imgW = 1000;
	var imgH = 650;

	//ウィンドウサイズ取得
	var winW = $(window).width();
	var winH = $(window).height();
	var scaleW = winW / imgW;
	var scaleH = winH / imgH;
	var fixScale = Math.max(scaleW, scaleH);
	var setW = imgW * fixScale;
	var setH = imgH * fixScale;
	var moveX = Math.floor((winW - setW) / 2);
	var moveY = Math.floor((winH - setH) / 2);

	$('#bg').css({
		'width': setW,
		'height': setH,
		'left' : moveX,
		'top' : moveY
	});
}

大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。
読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。
これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。

イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。
ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。

ソースコードと画像が「全て読み込まれた」というイベントは、javascriptのwindow.onloadで取得できますが、今回はjQueryを利用した書き方になっています。

+more read

このブログの右下に実装している「ページトップに戻る」ボタンは、
ページトップ時には非表示にし、ページを少しスクロールすると出現する仕組みになっています。
jQueryを利用すれば非常にカンタンなのでご紹介します。

<!-- html -->
<div id="pageTop">「ページトップに戻る」ボタン</div>

$(function(){
	$(window).scroll(function(){
		// 対象までの高さ
		var distanceTop = 100;

		// 対象に達しているかどうかを判別
		if ($(window).scrollTop() > distanceTop) {
			// していれば、pageTopをfadeIn
			$('#pageTop').fadeIn("slow");
		} else {
			// していなければ、pageTopをfadeOut
			$('#pageTop').fadeOut("slow");
		}
	});
});

この仕組みはパララックス（視差）効果を利用した縦スクロールサイトなどでは必ず使うと思います。

※仕組み自体は、以前ブログに書いた「jQueryを使った長い縦スクロールページの現在地による制御」とまったく同じなのですが、意外と使える小技なので肝となる部分を抜粋し、分かりやすくシンプルに書き直しました。

jQueryを利用してブラウザとそのバージョンを判別、スクリプトを分岐させる。

if($.browser.msie) {
	// ブラウザがIEの場合の処理
}

if($.browser.msie && $.browser.version < 7) {
	// ブラウザがIE6以下の場合の処理
}

if文内は以下の記述で、他のブラウザも判別出来ます。

$.browser.opera // Opera
$.browser.safari // Safari
$.browser.mozilla // Firefox

縦スクロールサイトを作る際には必ず必要になる、トップからの現在のスクロール量を取得します。
スクロールによるパララックス（視差）効果を実装する場合は、スクロール量と要素のオフセット値や条件分岐を利用して、背景をずらしたりオブジェクトを動かしたりします。

$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
	});
});

これだけ。値をとるだけならとっても簡単。
テスト用にブラウザ上で値を確認したい場合はhtmlに表示先を設定し、.textメソッドで値を出力しましょう。

<!-- html -->
<p id="scroll"></p>

$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
		$("#scroll").text("スクロール量：" + y); //追加
	});
});

相変わらず縦スクロールサイトが流行していますが、ページにアクセスした際に自動で指定の位置までスクロールする方法。
※以下の記述はjQueryとjQuery Easing Pluginを利用しています。

$(function(){
	var $speed = 1500; //スクロールのスピードを設定（ミリ秒）
	var targetOffset = $('#●●●●●●').offset().top; //ターゲットとなるdivを設定

	//ページを読み込み0.8秒後にターゲットとなるdivまで自動スクロール
	setTimeout(function(){
		$("html,body").stop().animate({scrollTop:targetOffset},$speed, 'quart');
		return false;
	},800);
})

上の例では、ページが読み込まれてから0.8秒後にターゲットとなるdivまで1.5秒かけて自動でスクロールします。

パララックス（視差）効果やページ内のスムーズスクロールなど、見せ方に動きをつけた縦長1ページで構成されるhtmlサイトが流行っていますが、ページ内の現在位置を取得してナビゲーションをアクティブに変更したり、要素をフェードインしたりする必要があったのでメモ。jQueryを利用して実装しています。

※この記事は、webOpixelさんのエントリ「jQueryで長いページの区切り（セクション）ごとに背景を変化させる」を大変参考にさせていただきました。ソースも必要な箇所を大きく抜粋させていただいた形です。webOpixelさんの記事はどれも分かりやすく、丁寧に説明されているので非常に助かりました。m(_ _)m

+more read