• かちびと.net

    コンテンツをユニークなアニメーションで入れ替える2KBの軽量jQueryプラグイン・MobilyNotesのご紹介です。省スペースでも使えるのはありがたいですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

コンテンツをユニークなアニメーションで入れ替える2KBの軽量jQueryプラグイン・MobilyNotes

スポンサーリンク

コンテンツをユニークなアニメーション
で入れ替える軽量なjQueryプラグイン
MobilyNotesのご紹介です。IE6や7
でも問題なく動作してくれます。省ス
ペースにコンテンツをまとめられるので
なかなか使い勝手もいいのでは。

ファイルサイズもたった2KBと大変軽量です。

MobilyNotes


紙で見ているかのように表現されたエフェクトがなかなかユニークです。画像やdiv要素ごとも可能です。また、自動で切り替わる、ボタン式などの選択も出来ますよ。

使い方

jQueryとプラグインを読み込んで以下のような設定をします。

$(function(){
	$('.notes_img').mobilynotes({
		init: 'rotate',
		showList: false
	});
	$('.notes_txt').mobilynotes({
		init: 'plain',
		positionMultiplier: 20,
		title: 'h2',
		autoplay: false
	});
});

デモには画像とテキストの2タイプがあったので上記のような設定をされています。自動で入れ替えたい場合はinit: ‘rotate’,を、ボタン式の場合はinit: ‘plain’,を指定します。

マークアップ

マークアップも極めてシンプル。

<div class="notes">
    <div class="note">
        <!-- content -->
    </div>
</div>

こんな感じ。div class=”note”を複数加えていけば出来上がりです。デモのマークアップは以下のようになっていました。

	<div class="notes_img">

		<div class="note">
			<img src="/assets/demo/notes/img/nature/img1.jpg" alt="" />
		</div>

		<div class="note">
			<img src="/assets/demo/notes/img/nature/img2.jpg" alt="" />
		</div>

		<div class="note">
			<img src="/assets/demo/notes/img/nature/img3.jpg" alt="" />
		</div>

		<div class="note">
			<img src="/assets/demo/notes/img/nature/img4.jpg" alt="" />
		</div>

		<div class="note">
			<img src="/assets/demo/notes/img/nature/img5.jpg" alt="" />
		</div>

	</div>

シンプルながら印象的で、なかなか使えそう。アニメーションは以下でデモをご確認下さい。ダウンロードも可能です。

MobilyNotes

URL :
TRB :

Comments & Trackbacks (3)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services