サイト内で次にどのボタンを押したら良いか、どう行動したら良いかをチュートリアル形式で表示できるjQueryの作り方を紹介している「Website Tour with jQuery」が便利そうだったのでご紹介。 ソーシャルアプリなどではゲームを始める前にチュートリアルを表示する事が多いのですが、それをjQueryでやってしまおうというDEMOになります。 デモ htmlでのコンテンツの方が更新作業が楽で良いですよね。 設定方法ですが、強調表示させる要素にクラス属性を追加して行く事で表示を制御しているようです。 スクリプトが実行されると、「次へ」「前へ」のリンクが表示されるようになり、ユーザーは自分で理解しながら進む事ができます。 説明文を表示するツールチップは色、位置、表示している時間をオプションでカスタマイズ可能になっています。 アプリやサイトを立ち上げた際にチュートリアルが必要な場合の参

「Custom Scrollbar」はスクロールバーのデザインとスクロール量をカスタマイズできるjQueryプラグインです。 デザイン以外にも、イージング、マウスホイールへの対応など多彩なオプションが設定可能になっています。 OSが変わっても同じ見せ方をしたい場合などに良さそうですね。 詳しくは以下 デモ 多彩なオプション機能 以下のようなオプションが設定可能です。 スクロールの方法（縦か横） スクロール量 イージング量（スクロールを停止した後の慣性の量） スクロールバーの幅と高さ マウスホイールのサポート 使い方 jQueryやjQUery.uiなどのライブラリをheadタグで読み込みます。 <link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> <script src="http://aj

Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from […] Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog. You can find the beautiful M

全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いてくれますのでプレゼンテーションやポートフォリオ、キャンペーンなどに使うのも面白そうです。 Awesome Scrolling Navigation 全画面がスライドします。背景に画像を指定しているのでテキストなんかも入れられるっぽいですね。試していませんけどこれは結構使えそうです。 動作確認していただくと分かるかと思いますが、左上のロゴ部分も微妙なスライドをして視差効果を出しています。 マークアッ

For jQuery lovers we have collected some Image Galleries with source files, you can modify these files very easily and make animation of your own desire (many are free but under license conditions). As you know jQuery is very hot and almost every project is now having jQuery in any form. It must be having great collection for you. Here are 100 jQuery Plugins for Image Galleries with Source Files.

画像を効果的に見せるプラグイン このプラグインを使用すると、画面にサムネイル画像が散らばるようなアニメーションになります。 各サムネールをクリックすると、大きな画像にアニメーションして行きます。 この表示のアニメーションが素敵！ こんな素敵なフォトギャラリーなら眺めてても飽きないですね。 次、前のボタンで別の画像に移動するなど、ユーザビリティーも考慮されています。 画像ギャラリーなどで使用すると素敵なサイトになるかもしれません。

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic. HTML Following the tradition, we will first lay down the HTML markup of the slideshow. The main container element is the #slideShowContainer div, which holds the #slideShow div an

Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio […] Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlar

ドットインストール代表のライフハックブログ

In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop […] In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a th

ドットインストール代表のライフハックブログ