Javascript」カテゴリーアーカイブ

lazzyload

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フォルダ以下に下記のファイルがあるか確認しておきましょう.

スクリーンショット 2014-11-05 1.02.45

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

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

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

<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を使用することが出来ます.

カテゴリー: ALL, Javascript, メモ | lazzyload はコメントを受け付けていません

easing

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/

 

カテゴリー: ALL, Javascript, メモ | easing はコメントを受け付けていません

scrollTo

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の大きさなども変化させても効果としては良いでしょう.

カテゴリー: ALL, Javascript, メモ | scrollTo はコメントを受け付けていません

lightBox

lightBoxはリンクから画像やhtmlをポップアップで開くためのプラグインです.
→サンプルページ

このサンプルページではサムネイル画像(縮小画像)と拡大用画像の2種類の画像を用意して,サムネイル画像をクリックすると大きな画像が表示されるという実装です.

●拡大表示画面
スクリーンショット 2014-09-24 21.27.02

<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

使用するためにはまずheadの終了タグの直前でlightboxのCSSとjavascriptを読み込みます.lightBoxでは表示用に専用のCSSが必要です.これはポップアップのレイアウトに使用されています.
2行目でCSS(lightbox.css)を読み込み,3行目でjQuery(jquery.min.js)を読み込みます.(※jQueryはプラグインより先に読み込む必要があります.)4行目でlightbox.jsを読み込みます.
また,lightBox専用の画像も用意されているため,こちらも任意の場所(フォルダなど)に置く必要があります.フォルダ構造は下記を参考にして下さい.

●フォルダ構造(※ファイルパスの記述に注意)
lightBox用画像
01

lightBox用CSS
03

lightBox用JS
02

<div>
	<a href="img/works_img/01.jpg" rel="lightbox[group]">
		<img src="img/thumb/01.jpg" width="250px" alt="thumb01">
	</a>
</div>

最後にlightBoxで表示される画像を用意します.このサンプルでは,サムネイル画像と本画像の2種類を用意して,サムネイル画像をimgタグでレイアウトし,aタグで本画像を指定しています.
小さい画像をクリックすると大きい画像にジャンプするというかたちです.lightBoxを使用するには2行目aタグの中にプロパティ rel=”lightbox” と記述するだけで動作します.lightboxの後の[group]はオプションでこの[group]を記述した同様の画像類をまとめて表示するというものです.[ ]の間に任意でグループ名を記述します.

参考ページ:http://shanabrian.com/web/library/lightbox2.5.php

カテゴリー: ALL, Javascript, メモ | lightBox はコメントを受け付けていません

fadeIn

アクセス時の画面全体のフェイドインの設定です.急に画面が切り替わるのでなく徐々に変化することで,全体をやわらかく感じさせることができます.
→サンプルページ

●フォルダ構造(jqueryの読み込み場所に注意)
スクリーンショット 2014-09-24 22.10.50

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	//起動前の設定//
	$(document).ready(function(){
		//起動前にbody全体の透明度を0似設定する.
		$('body').animate({opacity: "0"},0);
	});
	//起動後の設定//
	$(window).load(function(){
		//起動後にbodyの透明度を1(100%)に徐々に変化させる
		$('body').animate({opacity: "1"},750);
	});
</script>

使用するにはheadタグ終了の直前でscriptタグを使用してjquery.min.js(jQuery本体)を読み込みます.3行目$(document).readyは起動前の処理です.ここでbody全体の透明度を0に設定し,透明にしておきます.8行目の$(window).loadの起動直後の処理でbodyの透明度を100%に設定します.上記でアクセス後にbody全体が徐々にフェイドインするアニメーションが実装できます.

カテゴリー: ALL, Javascript, メモ | fadeIn はコメントを受け付けていません

JavaScriptを使う

[JavaScriptとは?]
JavaScript(ジャヴァスクリプト)とは,プログラミング言語のひとつである.Javaと名前が似ているが,異なるプログラミング言語です.オブジェクト指向のスクリプト言語であることを特徴とします.(wikipediaより)
このスクリプトをwebサイトに使用することで動的なウェブサイト構築が可能となり,様々なインタラクションやそれぞれのオブジェクトに「動き」をつける事が出来ます.

	<script>ここにコードを記述する</script>

JavaScriptを使用するには上記のスクリプトタグを使用します.記述する位置は通常はheadタグの終了の直前でスタイルシートの読み込みよりも後に書きます.

[jQuery]
jQuery(ジェイクエリー)は,ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです.ジョン・レシグが,2006年1月に開催された BarCamp NYC でリリースしました.様々な場面で活用されており,JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいます.(wikipediaより)

<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<link href="css/styles.css" rel="stylesheet" type="text/css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
</head>

jQueryを使用する際にはまずjQueryの本体をスクリプトタグを使用して読み込みます.上記の例では「index.html」の同階層に「js」というフォルダを作成しその中にjQueryファイルを置いて,5行目でscriptタグを使用して読み込んでいます.(※ファイルパスに注意 src=”js/jquery.min.js”)
read

[jQueryプラグイン]
jQuery本体を読み込むことで使用できる様々なプラグインを指します.プラグインは様々な用途に合わせて各ユーザーが使いやすく作成したものです.使用する際は著作権やライセンスなどに注意して下さい.目的に合わせて使用するプラグインを探し使用していきます.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>LightBox Sample</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" type="text/css" rel="stylesheet" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
	<header id="siteheader">
		<h1>LightBox Test</h1>
			<nav>
				<ul>
					<li class="button"><a href="#works">WORKS</a></li>
				</ul>
			</nav>
	</header>
	<div id="contents">
		<!--works-->
		<div id="works">
			<h2>
				WORKS<br/>
				─
			</h2>
			<div><a href="img/works_img/01.jpg" rel="lightbox[group]"><img src="img/thumb/01.jpg" width="250px" alt="thumb01"></a></div>
			<div><a href="img/works_img/02.jpg" rel="lightbox[group]"><img src="img/thumb/02.jpg" width="250px" alt="thumb02"></a></div>
			<div><a href="img/works_img/03.jpg" rel="lightbox[group]"><img src="img/thumb/03.jpg" width="250px" alt="thumb03"></a></div>
			<div><a href="img/works_img/04.jpg" rel="lightbox[group]"><img src="img/thumb/04.jpg" width="250px" alt="thumb04"></a></div>
		</div>
	</div>
</body>
</html>

→サンプルページ(サムネイルをクリックするとポップアップで表示)
jQueryプラグインを使用する際にはまずjQueryの本体を先に読み込む必要があります.その後目的のプラグインを読み込み,使用するプラグイン特有の設定を行い使用していきます.
上記は「LightBox」というプラグインの読み込みと設定です.scriptタグを使用して,8行目でjQuery本体を読み込み,9行目でlightBoxを読み込んでいます.(jsフォルダを作成しその中に両ファイルを置いています).7行目ではlightBox特有のCSSを読み込んでいます.(閉じるボタン,矢印など)プラグインによってはCSSも読み込まなければ使用できないモノもあります.
読み込むだけでは何も起きません.使用するには27行目aタグを使用して,hrefで拡大画像を指定しています.aタグの入れ子でimgタグを使用してサムネイル画像を表示しています.lightBoxを使用するには,aタグにオプションで「rel=”lightbox”」と記述します.lightboxの後ろに[グループ名]を付けるとグループ化されてまとめて閲覧できるようになります.

[様々なjQueryプラグイン]
参考01:http://www.skuare.net/test/jQuery.html
参考02:http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2013-best.html

カテゴリー: ALL, Javascript, メモ | JavaScriptを使う はコメントを受け付けていません