サイドメニュー向けのjQueryプラグイン、Sidrをサイトに導入してみました。

Sidr
スマートフォンでよく見かけるサイドバーが横から出てくる仕掛けが簡単に実装できるSidrcdbk.net CREATIVESヘ導入しました。
ページ左上の三角形をクリックすると出てくるようにしているのですが、スマートフォンでは動作しない様子。
なのでSafariとAndridブラウザーではページを横にスワイプすることで出るようにしました(Chromeはタブ移動がスワイプのため不可)
WordPressでメニューの中身を出しているためか、動作が不安定でたまに503になるためついでにSuper Cacheも導入。
動作がまだ不安定なところがあるのでしばし、様子見です。

インタラクティブなアクションを簡単に使えるjQueryプラグイン「mini.js」

Minijs
ウェブサイトでよく使う文字カウンターやTip、画像スライダー、アラートといったインタラクティブな要素を簡単に追加できるjQueryのプラグイン「Minijs」を紹介。
20120513現在β版ではあるものの、JSのコードを数行追加するだけでそれらの機能を追加することが出来ます。
Minijs02
Minijs01
ブログや簡単なランディングページなどにも使えそうなので手早くアクションを追加したいときに役立ちそうです。
http://minijs.com/

コーポレートサイトにjQueryを使ったモーションを追加しました。

Corporate
コーポレートサイトにjQueryベースでいろいろな機能を追加しました。
トップページのタイポグラフィーは上から表示されるように透明→非透明の効果を設定。
各ページヘはContact(お問い合わせ)を除き、ページ読み込みで下から上へイージングで表示されるようにしています。
Lightboxlike
その他サムネイルはリンクから、ページ内でフレーム上にウインドウを開き表示するLightbox的なものに変更。
最初右上に表示されている円はランダムに移動、色が変わります。
cdbk.net CREATIVES. http://creatives.cdbk.net

jQueryを使う理由

最近はJavaScriptよりもjQueryという言葉を目にする機会が増えてきた。

jQueryはJavaScriptを扱いやすくするために使うフレームワーク(もしくはライブラリと呼ばれているもの)の一つで、ほかのフレームワーク、prototypeなどと比べると視覚的にプログラムを組むことができる。

簡潔に言ってしまえば、「AのときBの動作を行う」これが基本でjQueryのプラグインと呼ばれているものを使えば、前述のBのバリエーションを簡単に増やすことができ、そしてCSSなどでも使うHTML上のセレクターが扱いやすい構造になっているので、結果としてWebデザイナーやマークアップエンジニアにも難なく使えるものになっている。つまりは手っ取り早くJavaScriptが使える。

たとえばスライドショーの機能や動くスクロール遷移、検索入力欄にウォーターマークを追加するといったことに使われ、年始にアップした年賀状サイトおみくじのプログラムも主なものはjQueryでできている。

JavaScript自体は10年以上前から使われているのに、どうして最近になってjQueryが目立つようになったのか、昔はドラック&ドロップさせるにも処理速度が乏しく、ぎこちないものになりがちだったものが、現在では端末やブラウザーの性能が向上したお陰で特に問題なく、まるでアプリケーションのような動作をサイトで行うことも出来るようになってきた。

今後、スマートフォンなどのカメラデバイスやコンタクトリストなどとブラウザーが連携を取れるようになるとアプリケーションをマーケットなどからインストールする手間をかけなくても様々なアプリケーションを使える時代が数年でやってくる。となるとアプリ開発もJAVAやObject CベースのものからWebベースのサーバーエンドのプログラミングとブラウザーベースのフロントエンドのプログラミング、マークアップになる。つまりはjQueryなどが今以上に使われるようになる(はず)

近々cdbk.net CREATIVESのサイトを作り替えるのでその際作ったplug-inは公開していく予定です。

WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法


Caps

最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。
そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。
使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。
エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。
JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。

//初期表示設定
function jumpin_set(){
	$(".jumpin").each(function(){			//指定するクラス
		var img_w = $(this).width();		//デフォルトの画像幅取得
		var img_h = $(this).height();		//デフォルトの画像高取得
		$(this).attr({"data-h":img_h});		//デフォルトの画像高を属性として保存
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小
	});
}
$(document).ready(function(){
	$(window).load(function(){
		setTimeout(function(){
		jumpin_set();
                }, 100);
	});
	$(".jumpin").hover(function(){//マウスオーバー時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		var next_h = $(this).attr("data-h");
		if(next_h){
		$(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic");
		$("img",this).animate({height:img_h},100).animate({height:next_h},100);
		$(this).removeAttr("data-h");
		}
	});
	$(".jumpin").mouseout(function(){//マウスアウト時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).attr({"data-h":img_h});
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic");
	});
});

サンプルスクリプト
上記でスクリプトやCSSがバッティングしていなければ動作すると思います。
続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”