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」
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」」の続きを読む
「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて影も動きます。
白を基調としたデザインのサイトで映えそうですね。
サンプルを作ってみました。
メニューに影をつけたり、アイコンや画像にちょっとしたアクセントを付けるときに良さそうです。
導入も簡単ですよ。
最近、特に女性に人気があるPinterest（ピンタレスト）。
その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。
Pinterest（ピンタレスト）は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。
そのPinterest（ピンタレスト）風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。
サンプルページを作ってみました。
jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。
→「Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」」の続きを読む
tablecloth.jsは、Tableで作った表をお洒落に演出するjQueryプラグインです。
表はテーブルを使用して作成されることが多いと思いますが、そのままだと少し寂しい感じがします。そういう時に利用したいのが、この「tablecloth.js」です。テーブルで作った表をお洒落にしてくれるだけでなく、ソート機能も付けることができます。
サンプルを作ってみました。
設置方法も簡単です。
→「Table（表）をお洒落にするjQueryプラグイン「tablecloth.js」」の続きを読む
Old School Cassette Player with HTML5 Audio | Codrops
最近ではすっかり見なくなったカセットテープ。ＣＤが登場する以前は音楽を聴くにはカセットテープが主流でしたが、それも２０年以上も昔の話。もしかすると今の若い人はカセットテープの存在すら知らないのかもしれません。
そんなビンテージ的な存在の音楽プレイヤーと、HTML5を使用した現代の音楽プレイヤーを融合させたとも言える「Old School Cassette Player with HTML5 Audio 」を今回はご紹介します。
カセットテープをリアルに再現してあり、ボタンを押した時や先送り／巻戻しの時の音もかつて懐かしさが蘇ってくるほど忠実です。
配布されているソースを使用してサンプルを作ってみました。
いかがでしたか？カセットテープで音楽を聴いていた世代には懐かしく、デジタルプレーヤーに慣れている世代には逆に斬新に感じられるのかもしれませんね。
この「Old School Cassette Player with HTML5 Audio 」のソースを利用して、曲を変更したりカセットテープの画像を加工したりと自分なりにアレンジする方法をご紹介します。
→「懐かしいカセットテープ型のミュージックプレーヤー「Old School Cassette Player with HTML5 Audio 」」の続きを読む
今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。
サンプルを作ってみました。
設置方法も簡単です。使用方法は続きをご覧下さい。
→「まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」」の続きを読む
Webサイトを作成していると世界地図を表示させる機会もあるかもしれません。
世界地図の画像を貼り付けたり、グーグルマップなどで世界地図を表示させたりという手もありますが、もう少しお洒落に世界地図を表示させたい…というときに簡単便利なのがこのjQueryプラグイン「JQVMap（jQuery Vector Maps）」。
拡大縮小させても画像が粗くならないScalable Vector Graphics (SVG)が利用されていて、拡大・縮小可能な綺麗な世界地図が描かれます。
サンプルはこちら
地図の左上にある「+・-」ボタンで拡大縮小。地図の上でドラッグさせて位置を移動できます。また国の上にマウスを持って行くと吹き出しで国名が表示されます。
設定方法は続きをご覧ください。
→「お洒落な世界地図を表示するjQueryプラグイン「JQVMap（jQuery Vector Maps）」」の続きを読む
最近、パララックス効果（視差効果）を利用したワンページスクロールサイトをよく見かけるようになりました。スクロールすることで画像や文字に動きや演出が加わり印象的なWebサイトを実現しています。
今回はこのパララックス効果を利用したワンページスクロールサイトを比較的簡単に導入できる「skrollr」を紹介します。
サンプルを作ってみました。
エフェクトや背景画像の組み合わせ次第で、とてもお洒落でクールなワンページのスクロールサイトが実現出来ます。
作り方もエフェクトやコンテンツを<div>要素毎に設定するので比較的わかりやすく導入出来ると思います。
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑