div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
高機能過ぎるjQueryスライドショー「Camera slideshow」
ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』
クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」
ネットショップなどではいかに商品をお客様に伝えるかが大切になります。商品によっては３６０度全方向から商品のイメージをみせたい場合もあるでしょう。
このjQueryプラグイン「Spritespin」を利用すれば３６０度全方向からのビューが簡単に実現できます。FLASHを使用していないのでiPhoneなどでも表示されます。
サンプルはこちらになります。
画像を準備すれば簡単に実装できます。ただ商品を回転させながら全角度からうまく撮影するにはちょっと工夫が必要になりますね。
iPhoneの画像を利用したとても個性的なアニメーションコンタクトフォームを紹介します。
「Magical Contact Form」と名付けられたユニークな効果のあるフォームです。なぜかiPhoneにカードが収められて飛んでいきます。テキストを入力しているときのアニメーションもユニークです。
画像を変更するだけでも容易にカスタマイズできますので、初心者のかたでもデザイン変更が簡単にできます。
サンプルを作ってみました。サンプルといっても画像を変更しただけです。
※実際に送信はされません。
過去の記事で、色々なモバイル端末のPSDファイルを紹介しています。利用すれば面白いフォームが出来ると思います。
iPhone、iPadやMacなどのディスプレイを集めたPhotoshop（フォトショップ）端末ディスプレイPSD無料素材集
もちろん敢えてiPhoneなどの画像にこだわらなくても、自分で封筒の画像を用意するなど発想次第でユニークなデザインが実現出来ると思います。
→「iPhoneの画像を利用したユニークなコンタクトフォーム「Jquery Magical Contact Form」」の続きを読む
Jquery Interactive Animated Menu
メニューがゆっくり回転するアニメーションになっています。
この「Jquery Interactive Animated Menu」を利用すれば簡単に実現できます。
CSSや画像を少し変更するだけでも、ユニークなトップページが作れますので、専門的な知識がなくても使われている画像を変更したりして利用できると思います。ポートフォリオ用のサイトにも適してそうですね。
サンプルを作ってみました。
サンプルは使われている画像を変更しただけです。
最新のブラウザに対応していますので、古いブラウザでは動作しない場合があります。
この「Jquery Interactive Animated Menu」の入手方法と利用方法は続きをどうぞ。
→「観覧車のように回るアニメーションメニュー「Jquery Interactive Animated Menu」」の続きを読む
PFold: Paper-Like Unfolding Effect
折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、このjQueryプラグイン「PFold」です。
サンプルページを作ってみました。
見た頂いたらわかると思いますが、立体的に紙が開いてコンテンツを表示します。
（残念ながら、IE8などCSS3に対応していない古いブラウザでは動作しません。）
オプション設定によっては色々な動きができますが、ここでは基本なものを説明します。
Windy – A Plugin for Swift Content Navigation
このjQueryプラグイン「Windy」を使用すると、まるで写真やカードが風でひらひらと飛ばされてしまっているように画像をめくっていくことができます。
サンプルを見て頂くと分かると思います。
このjQueryプラグイン「Windy」を使用して、あまりスペースがないところでも印象的にカッコ良く複数の画像を見せることができそうですね。画像だけでなくテキストや見出しも表示することができます。
jQueryプラグイン「Windy」の使用方法は続きをご覧下さい。
Nice “Flashy” menu with Jquery.
jQueryでまるでFlash（フラッシュ）で作ったかのようにアニメーションする動きのあるメニューを導入できる「Nice “Flashy” menu with Jquery」を紹介します。
メニューにマウスオーバーしたときにカッコ良くアニメーションします。
まずはサンプルをご覧下さい。
背景画像をウィンドウズサイズの大きさにあわせて表示する機能も付いていますので、これを利用するだけで見栄えのするトップページが作れてしまいます。
美容やファッション、レストランなどお洒落なサイトに良さそうですね。
このFlash（フラッシュ）のようなjQueryメニューナビゲーションの設置方法は続きをどうぞ。
→「Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」」の続きを読む
今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。
サンプルを作ってみました。
設置方法も簡単です。使用方法は続きをご覧下さい。
→「まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」」の続きを読む
Zoomooz.jsは、Webページの要素のズームを行うためのjQueryプラグインです。
画像をズームさせてギャラリー風に見せたり、テキストを一部拡大させて効果的にみせたりすることに使用することができます。しかも設置方法は簡単です。
サンプルはこちらからどうぞ
うまく組み合わせて使えば、アイデア次第ではWEBサイトだけでなく、Preziのようにプレゼンにも使うことも出来そうです。
「Zoomooz.js」の設置方法は続きをご覧ください。
テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。
テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すことができます。
しかも、導入はいたってシンプル簡単です。
サンプルページを作ってみました。ご覧ください。
日本語のテキストでもきちんと表示されていますね。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑