Rotate HTML elements by mouse in JavaScript - Propeller.js html要素をプロペラ風になめらかに回転させるjQueryプラグイン「Propeller.js」 自動で回転させることもできるし、ドラッグ＆ドロップによって回転させて加速度をつけたアニメーションをさせることもできます 汎用性はありませんが、ちょっとしたエフェクトとして使えそうですね 関連エントリ CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 読み終わったらスライドアニメーションで他記事に誘導できるjQueryプラグイン「Promo Slide」 アニメーションするプログレスバーで達成度を視覚化できるjQueryプラグイン

jQuery Immersive Slider by Pete R. | The Pete Design スライダーの背景もダイナミックに切り替えるクールなスライダ実装jQueryプラグイン「Immersive Slider」。 単なるスライドだけではなくて、スライドの背景も切り替えてかっこいいエフェクトを出せるプラグインです スライダ部分だけを変更するより迫力がありますね。 ちなみに、背景画像部分の画像も用意する必要があるようです 関連エントリ ハッシュフラグメントでブックマークに対応できるスライダー「Hashslider v2」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」 3Dでグルグル回転するインパクト大なスライダー実装jQueryプラグ

fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。

jQuery jQSlider :: Example Slimple ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 ブラウザを紙芝居っぽくしたスライドショーが作れます。この手のプラグインでは当然ですが、１ファイルのHTML内に全スライドを書けます。 ブラウザ幅が変わっても伸縮するレスポンシブな仕様になっています ブロック要素内にスライドショーを入れ込んだりもできるようです パワーポイント使うよりもちょっとギークっぽいスライドショーライブラリ。 １つの選択肢として使えそう 関連エントリ レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 フルスクリーン背景がスライドショーになるCSS3サンプル 指定したパスに沿ってテキストが動く斬新スライドショー実装jQueryプラグイン「Scroll Path」 レスポン

Portfolio Image Navigation with jQuery | Codrops 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル 通常ギャラリーというと左右の矢印がついているだけですが、今回紹介するものは上下左右にナビゲーションさせるというものです。 ページ下部にはナビゲーションが付いており、こちらをクリックしても画像が見れます。 上下の位置関係による意味付けをギャラリーにつけることが可能 デモはこちら 関連エントリ PHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」 立体感がいい感じの３Dギャラリー作成JSチュートリアル CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 CSS3をフル活用した立体的な画像ギャラリー作成デモ

Professor Cloud JavaScriptで実装するクルクル回転する3DカルーセルUI実装ライブラリ。 枠内を画像が３Dで回転します。通常こうしたUIを作るにはFlashが多いですが、JavaScriptでやっちゃってます。 クリックすればLightBoxが開きます。 関連エントリ 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」

jQuery.popeye 2.0 | an inline lightbox alternative インラインでその場でLightboxできる「jQuery.popeye」というスクリプトがあるみたいです。 画面をグレーにすることなくその場で画像を送れるので、地味ではありますがこういう使い方もいいなという効果を得られます。 動きとしては記事中にある、一見普通の画像。 カーソルを合わせるとナビゲーションが現れ、画像のスライドが表示されます。 微妙に、写真の下にはキャプションが表示され、写真の説明が見れます。 ありそうで、なかったですね。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 画像やページをLightBox風に表示できるThickbox 表示法が新しくセクシーなLightBox「SexyLightBox」

Slot Machine Tabs | CSS-Tricks タブ切り替えでコンテンツがスロットマシンっぽく切り替わるサンプル。 普通はタブをクリックするとパッと画面が切り替わりますが、このサンプルは面白くて内容がアニメーションしながらスロットマシン風にカッコよく切り替わります。 スタイリッシュ度を上げたい方は覚えておくとよいかも。 タブだけじゃなくて、画面切り替えの際にこういうアニメーションしたらそれはそれでカッコ良さそうですね。 関連エントリ わずか2KBで直感的に使えるタブインタフェース実装用jQueryプラグイン「idTabs」 タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」

Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると１からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」

Grid Accordion with jQuery | CSS-Tricks グリッドアコーディオンを新しい情報表示の仕方をjQueryで実現しているデモとサンプルコードが公開されています。 複数のカラムから１列が構成されていて、列の特定カラムをクリックするとそのカラムが拡大しつつ、列自体も拡大されます。 動き自体も面白いのですが、比較テーブルなんかで便利に使えるかもしれませんね。 にゅっ、とjQueryでアニメーションする部分もいいですね。 関連エントリ jQueryでアコーディオン作成のチュートリアル JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル

ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル＆サンプル 2009年12月08日- ページサイドにアニメーションするMac OS X 風のドック風ナビゲーション作成チュートリアル＆サンプルが公開されていてソースコードのダウンロードも可能です。 次のようなＵＩがサイドバーに現れてカーソルを合わせるとニュイっとアニメーションで現れます。ナビゲーションの表示を最小限に抑えたい場合などに使えそうですね。 デザインはCSSで行われているため、もっと自分のサイトにあった形にカスタマイズすることも出来そうです。 以下のエントリを参照してください。 Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集

スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例が公開されており、チュートリアルと共にダウンロード可能になっています。 サンプルを見ると、殆どの面倒なことがjQuery側にてやってくれるため、非常に簡単なプログラムになっています。 付いてくるのがリアルタイムにしすぎるとガクガクして酔いますが、ちょっとした遅延があったあと、アニメーションして付いてくるので、動きとしてもよいですね。 jQueryの学習用に、また実際にサイトにサクッと組み込んでみる際にもよさそうですね。 以下のエントリを参照してください。 Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks

twitter facebook hatena google pocket 背景画像をスライドショー風に見せるとサイトが印象的に見えます。 jQuery maxImage plugin: DemoはJavaScriptによりターゲット内の画像を最大表示してくれます。 これを利用して背景画像をスライドショーにします。 sponsors 使用方法 jQuery maxImage plugin: Demoからjquery.maximage.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.maximage.js"></script> <script type="text/j

Image splitting effect with CSS and JQuery ・TutsValley マウスオーバーで画像を扉のように左右にアニメーションさせるjQueryサンプルが公開されています。 画像上にマウスを置くと、ビローンと中心から半分に割れて左右にアニメーションしていきます。 デモページ 面白いのは、１枚の画像でこれを実現しているところです。 CSSで２枚のブロックを作って、それをアニメーションさせています。 応用することで、縦方向に分割したりと、他にも面白いことが出来そうです。 関連エントリ jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ユニークで使えそうなjQueryプラグイン10個

jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg

色が徐々にアニメーションして変化していく効果を作成するjQueryプラグイン「jquery.color」 2009年07月10日- Plugins | jQuery Plugins 色が徐々にアニメーションして変化していく効果を作成するjQueryプラグイン「jquery.color」。 特定の色から別の色になめらかにアニメーションさせるには中間の色を計算して反映する必要がありますが、jQuery.color があれば簡単に実装できるみたい。 ↓↓↓徐々に色が変わっていく↓↓↓ ↓↓↓まだまだ変わります↓↓↓ デモページ - Animate Boxes ボタンを押してみましょう。 サイズの変更をしちゃうとレイアウトが崩れちゃうということであんまり使うことは無いのかもしれませんが、ボックス要素の色をアニメーション変化させ、目立たせるという用途にはなかなか使えそう。 関連エントリ アニメーショ

10 Really Interesting jQuery Plugins | Queness ユニークで使えそうな jQueryプラグイン10個。 プラグインといえば、タブやLightboxといった定番のものから、他にも役立つものが色々とありますが、紹介されているものはどれも便利そうでしたのでいくつかご紹介。 Impromptu LightBox風に、OK・Cancel のダイアログを表示できます。 Captify 画像の下部に半透明の背景付きキャプションを表示。アニメーションしていい感じ Favico リンクに自動でfaviconを付けてくれる jQuery BreadCrumb アニメーションして使いやすいパンくずリスト jQuery Spotlight 特定のブロック要素以外にオーバーレイして特定のブロックを目立たせます jQuery Peel ページがペラっとめくれたような驚きのエ

タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」 2009年06月16日- jQuery TOOLS - The missing UI library for the Web タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」。 同様のライブラリは他にあるかもしれませんが、アニメーションや見た目の点で非常に洗練されていて覚えておく価値アリなものになってます。 Expose 該当部分だけを目立たせることが出来る ↓↓クリックするとクリックした位置以外がグレー表示になります Tooltip イカしたスタイルがかかったツールチップ Tab 綺麗なタブUI Overlay LightBox風のページ内ウィンドウ実装 Scrollable 少ないスペースでコンテンツをスクロールするウィジェット実