「floating.js」は画像や絵文字、テキストなどの要素をページ上にフロートさせることができるjQueryプラグインです。
サンプルを見ていただいた方がわかりやすいと思います。
→ 要素を画面上にフロートさせるjQueryプラグイン「floating.js」サンプル
どういう場面で使おうか迷ってしまいそうですが、アイデア次第では面白いサイトが作れそうです。
Categoryアニメーション
映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。
舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。
今回は、そのカーテンの開け閉めのアニメーションをjQueryで再現する方法です。
最初にサンプルをどうぞ。
舞台のカーテンを開けるような効果をjQueryとCSSで再現するサンプル
よくわからないというひとも、ソースをコピペしたら動作すると思います。
サイトの背景に夜空の星を表示することができるjQueryプラグインです。
マウスの動きに合せて、星が流れるような動きをします。
サンプルを作りましたので、サンプルを見ていただいたほうが早いかと。
星空をサイトの背景画像にするjQueryプラグイン「jQuery Starfield」サンプル
実際のところ、どういう場面で使えるのかすこし頭を抱えるところではあります・・。でも、アイデア次第でインパクトのある使い方ができるはず。
モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「animatedModal.js」を使うと、小窓ではなくフルスクリーンでモーダルウィンドウが表示されます。
動きもにゅるっと、気持ちいい動きになっています。
フルスクリーンで表示されるので、モーダルで表示させたいコンテンツが多い時などに重宝しそうです。
サンプルを作ってみました。
⇒ モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」サンプル
動きは、サンプルを見ていただけるとわかると思います。
『rainyday.js』は、まるでガラス越しの風景に雨が降ってきたかのようなエフェクトを出すJavaScriptです。HTML5のcanvas機能が使われています。
とてもリアルなので見入ってしまうほど。サンプルを作ってみました。
【サンプル】
窓ガラス越しに雨を降らせるアニメーション『rainyday.js』
・Internet Explorer 8 以降
・Firefox 23 以降
・Google Chrome 27 以降
・Safari 5.1
などのモダンブラウザで動きます。
この『rainyday.js』の使用方法は続きをご覧下さい。
クリックすると円状にメニューが飛び出すアニメーションを実現できるのが、このjQueryプラグイン「Pop Circle」です。
中央の円（トリガー）をクリックすると、それを囲む様にメニューが飛び出します。メニューの飛び出す方向は、円状の、半円、1/4円に変更することが出来ます。
まずはサンプルをご覧下さい。
→ メニューが飛び出すjQueryプラグイン「Pop Circle」サンプル
アニメーションするスピードや飛び出すときの効果などもカスタマイズできます。
メニューに使うのもよし、イメージギャラリーにするのもよし、アイデア次第ではサイトにユニークな演出を与えることができそうです。
設置方法は続きをご覧下さい。
Responsive Multi-Level Menu | Codrops
今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。
限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。
まずは、サンプルをご覧下さい。
レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル
古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。
→「レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」」の続きを読む
Text Opening Sequence with CSS Animations | Codrops
今回は、テキストを映画のトレーラーやオープニング風にアニメーションさせて表示させる「Text Opening Sequence with CSS Animations 」を紹介します。
サンプルをみていただいたほうがわかりやすいと思います。
映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」サンプル
（古いInternet ExplorerなどのCSS３に対応していないブラウザでは作動しません。）
まるでフラッシュを使っているような動きですね。使用されているのはCSSですので、テキストを簡単に変更できます。またフラッシュを使用するよりもSEO的に効果が見込まれそうです。
→「映画の予告風にテキストをアニメーションさせる「Text Opening Sequence with CSS Animations 」」の続きを読む
ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。
この『Shadow animation jQuery plugin』はCSS3 box-shadow プロパティのボックスへ影を付ける効果を拡張してアニメーション化してくれるものです。
サンプルをご覧下さい。
→影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』サンプル
最新のブラウザに対応しています。
→「影をアニメーションさせるjQueryプラグイン『Shadow animation jQuery plugin』」の続きを読む
今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。
ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。
サンプルを作ってみました。
→『リアルな本を再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」サンプル』
※古いブラウザでは正しく動作しませんので、ご注意下さい。
（サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。）
本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。
→「リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑