「ALL」カテゴリーアーカイブ

lazzyloadは画像またはテキストを遅延でロードするプラグインです．
ウィンドウに画像・テキストが入るとこれらの読み込みを順々に開始していきます．
→サンプルページ

プラグインを読み込む際はheadタグの終了直前でscriptタグを使用して記述します．
まず1行目で[jquery.min.js]（jQuery）を読み込みその後に[jquery.lazyload.min.js]
を読み込み使用する準備が完了します．

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>

つづいてフォルダ構造の確認です．
jsフォルダ以下に下記のファイルがあるか確認しておきましょう．

<script type="text/javascript">
	$('img').lazyload({
		effect: 'fadeIn',
		effectspeed: 2000
	});
</script>

[jquery.lazyload.min.js]読み込み後のscriptタグではlazzyloadの初期設定を行います．ここではimgタグに対して遅延ロードを行うように設定しています．
effectはロードの際のアニメーション，effectspeedは読み込みの速度です．

今回のサンプルで画像はデフォルト表示用のサムネイル画像（小さい画像）と本画像（クリック後の大きい画像）を用意します．（上記のフォルダ構造を確認）

<div>
	<a href="img/works_img/01.jpg">
		<img class="lazy" src="img/thumb/loader.jpg" alt="thumb01" width="250px" data-original="img/thumb/01.jpg" />
	</a>
</div>

上記は実際に遅延ロードを行いたい画像に対しての設定です．
このサンプルでは，ボックス（divタグ）の中にリンク（aタグ）を用意しその中にサムネイル（imgタグ）を配置している状態です．aタグのhrefではサムネイルクリック後に表示する本画像を指定しています．
imgタグのセレクタのclassにlazyと記述することで，プラグインの使用を認めます．

※注意すべき点は，srcでダミー画像を指定し，data-originalでサムネイル画像を指定することです．srcのダミー画像はフェイドインする前に表示するための画像を指定します．（ローディング用画像）data-originalはローディング後に実際に表示する画像となります．

以上の指定でlazzyloadを使用することが出来ます．

easingはjQueryにさまざまなアニメーション効果をつけるためのプラグインです．
→サンプルページ

このサンプルでは，左のナビゲーションをクリックすると，ABOUT, WORKS, CONTACTと移動しますが，その際のアニメーションの効果にeasingのエフェクトを使用しています．いちど多めに移動し戻るような動作をしています．

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>

使用する際はheadタグの終了直前でscriptタグを使用して記述します．まず1行目で[jquery.min.js]（jQuery）を読み込みその後に[jquery.easing.1.3.jp]を読み込み使用する準備が完了します．

<script type="text/javascript">
	//起動前の設定//
	$(document).ready(function(){
		$('body').animate({opacity: "0"},0);
		// #で始まるアンカーをクリックした場合に処理
		$('a[href^=#]').click(function(){
			// スクロールの速度
			var speed = 1000; // ミリ秒
			// アンカーの値取得
			var href= $(this).attr("href");
			// 移動先を取得
			var target = $(href == "#" || href == "" ? 'html' : href);
			// 移動先を数値で取得
			var position = target.offset().top;
			// スムーススクロール
			$("html, body").animate({scrollTop:position}, speed, "easeOutBack");
			return false;
		});
	});
</script>

つづいてのscriptタグの記述はaタグでid指定している箇所にスクロールアニメーションを行うための記述です．
16行目の末尾”easeOutBack”がeasingの処理になります．この部分に”イージングの処理”を記述して効果を変更していきます．

例:（効果をeaseOutBackからeaseInOutQuadに変更）

$("html, body").animate({scrollTop:position}, speed, "easeOutBack");

↓

$("html, body").animate({scrollTop:position}, speed, "easeInOutQuad");

easingの指定と効果は以下のページで確認してください．
参考ページ：http://semooh.jp/jquery/cont/doc/easing/

jQeryを使用して，なめらかにスクロールするページを作成します．
→サンプルページ01

<script src="js/jquery.min.js" type="text/javascript"></script>

使用するためにはまずheadタグ終了の直前でjquery.min.js（jQuery本体）を読み込みます．
上記ではjsフォルダを作成しその中にjquery.min.jsを置いています．（※読み込む場所に注意：js/がこの記述です）

<script type="text/javascript">
	$(document).ready(function(){
		// #で始まるアンカーをクリックした場合に処理
		$('a[href^=#]').click(function(){
			// スクロールの速度
			var speed = 1200; // ミリ秒
			// アンカーの値取得
			var href= $(this).attr("href");
			// 移動先を取得
			var target = $(href == "#" || href == "" ? 'html' : href);
			// 移動先を数値で取得
			var position = target.offset().top;
			// スムーススクロール
			$("html, body").animate({scrollTop:position}, speed, "swing");
			return false;
		});
	});
</script>

直後にさらにscriptタグでスクロールの設定を行っています．上記ではaタグの#で始まるアンカーをクリックした際にそのidをもつ箇所にスムーズにスクロールするという記述です．

<li class="button"><a href="#about">ABOUT</a></li>
<li class="button"><a href="#works">WORKS</a></li>
<li class="button"><a href="#contact">CONTACT</a></li>

ナビゲーション（aタグ）の設定です．hrefに#id名を記述することで，このid名をもつ箇所にジャンプさせます．

<div id="contact">
	<h2>
		CONTACT<br/>
		─
	</h2>
	<div>
		<p>
			〒192-0394<br/>
			東京都八王子市鑓水2-1723<br/>
			TEL: 042-679-5623<br/>
			FAX: 042-679-5646<br/>
			<a href="mailto:gurafu@tamabi.ac.jp">Email: gurafu@tamabi.ac.jp</a><br/>
		</p>
	</div>
</div>

ナビゲーションで指定したid名をもつdiv要素を配置します．「div id=”contct”」これで関連づけが出来，スムーズにスクロールする実装が可能になります．

つづいて応用としてランダムに配置されたDIV要素に斜めに移動するサンプルです．
→サンプルページ02

$(document).ready(function(){
	// #で始まるアンカーをクリックした場合に処理
	$('a[href^=#]').click(function(){
		// スクロールの速度
		var speed = 1200; // ミリ秒
		// アンカーの値取得
		var href= $(this).attr("href");
		// 移動先を取得
		var target = $(href == "#" || href == "" ? 'html' : href);
		// 移動先を数値で取得
		var posTop = target.offset().top;
		var posLeft = target.offset().left-260;
		// スムーススクロール
		$("html, body").animate({scrollTop:posTop, scrollLeft:posLeft}, speed, "swing");
		return false;
	});
});

14行目の$(“html, body”).animateの後の箇所にカンマで区切りscrollLeft:posLeftを追加します．上下スクロールのみでなく，左右のスクロールの移動場所も追加したカタチです．

/*div04*/
#d{
	position:absolute;
	top:4000px;
	left:6000px;
	background-color:#FF0;
	width:1024px;
	height:728px;
}

CSSでdiv要素をランダムに配置します．サンプルではpostionをabsoluteで指定して，top, leftにランダムな数を記述しています．他のdiv要素にもそれぞれに適用してください．width・heightの大きさなども変化させても効果としては良いでしょう．