Authorpannyatto

折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」

PFold: Paper-Like Unfolding Effect

折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、このjQueryプラグイン「PFold」です。

サンプルページを作ってみました。

→ 折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル

見た頂いたらわかると思いますが、立体的に紙が開いてコンテンツを表示します。
(残念ながら、IE8などCSS3に対応していない古いブラウザでは動作しません。)

オプション設定によっては色々な動きができますが、ここでは基本なものを説明します。

→「折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」」の続きを読む

写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」

Windy – A Plugin for Swift Content Navigation

このjQueryプラグイン「Windy」を使用すると、まるで写真やカードが風でひらひらと飛ばされてしまっているように画像をめくっていくことができます。

サンプルを見て頂くと分かると思います。

→ 写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」サンプル

このjQueryプラグイン「Windy」を使用して、あまりスペースがないところでも印象的にカッコ良く複数の画像を見せることができそうですね。画像だけでなくテキストや見出しも表示することができます。

jQueryプラグイン「Windy」の使用方法は続きをご覧下さい。

→「写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」」の続きを読む

Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」

Nice “Flashy” menu with Jquery.

jQueryでまるでFlash(フラッシュ)で作ったかのようにアニメーションする動きのあるメニューを導入できる「Nice “Flashy” menu with Jquery」を紹介します。

メニューにマウスオーバーしたときにカッコ良くアニメーションします。

まずはサンプルをご覧下さい。

→ Flashのようなクールなメニューナビゲーションを実現「Nice “Flashy” menu with Jquery」サンプル

背景画像をウィンドウズサイズの大きさにあわせて表示する機能も付いていますので、これを利用するだけで見栄えのするトップページが作れてしまいます。

美容やファッション、レストランなどお洒落なサイトに良さそうですね。

このFlash(フラッシュ)のようなjQueryメニューナビゲーションの設置方法は続きをどうぞ。

→「Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」」の続きを読む

簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」

Real Shadow

「Real Shadow」は要素に影を付けることができるjQueryプラグインです。カーソルの位置を光源としてカーソルの動きに合わせて影も動きます。

白を基調としたデザインのサイトで映えそうですね。

サンプルを作ってみました。

簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」サンプル

メニューに影をつけたり、アイコンや画像にちょっとしたアクセントを付けるときに良さそうです。

導入も簡単ですよ。

→「簡単に影をつけることが出来るjQueryプラグイン「Real Shadow」」の続きを読む

Pinterest(ピンタレスト)風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」

最近、特に女性に人気があるPinterest(ピンタレスト)。
その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。

Pinterest(ピンタレスト)は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。

そのPinterest(ピンタレスト)風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。

サンプルページを作ってみました。

→ Pinterest(ピンタレスト)風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル

jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。

→「Pinterest(ピンタレスト)風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」」の続きを読む

Table(表)をお洒落にするjQueryプラグイン「tablecloth.js」

tablecloth.jsは、Tableで作った表をお洒落に演出するjQueryプラグインです。

表はテーブルを使用して作成されることが多いと思いますが、そのままだと少し寂しい感じがします。そういう時に利用したいのが、この「tablecloth.js」です。テーブルで作った表をお洒落にしてくれるだけでなく、ソート機能も付けることができます。

サンプルを作ってみました。

→ Table(表)をお洒落にするjQueryプラグイン「tablecloth.js」サンプル

設置方法も簡単です。
→「Table(表)をお洒落にするjQueryプラグイン「tablecloth.js」」の続きを読む

懐かしいカセットテープ型のミュージックプレーヤー「Old School Cassette Player with HTML5 Audio 」

Old School Cassette Player with HTML5 Audio | Codrops

最近ではすっかり見なくなったカセットテープ。CDが登場する以前は音楽を聴くにはカセットテープが主流でしたが、それも20年以上も昔の話。もしかすると今の若い人はカセットテープの存在すら知らないのかもしれません。

そんなビンテージ的な存在の音楽プレイヤーと、HTML5を使用した現代の音楽プレイヤーを融合させたとも言える「Old School Cassette Player with HTML5 Audio 」を今回はご紹介します。

カセットテープをリアルに再現してあり、ボタンを押した時や先送り/巻戻しの時の音もかつて懐かしさが蘇ってくるほど忠実です。

配布されているソースを使用してサンプルを作ってみました。

→ 懐かしいカセットテープ型のミュージックプレーヤー「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」です。

サンプルを作ってみました。

→ jQueryプラグイン「jquery.jaticker.js」サンプル

設置方法も簡単です。使用方法は続きをご覧下さい。

→「まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」」の続きを読む

お洒落な世界地図を表示するjQueryプラグイン「JQVMap(jQuery Vector Maps)」

Webサイトを作成していると世界地図を表示させる機会もあるかもしれません。

世界地図の画像を貼り付けたり、グーグルマップなどで世界地図を表示させたりという手もありますが、もう少しお洒落に世界地図を表示させたい…というときに簡単便利なのがこのjQueryプラグイン「JQVMap(jQuery Vector Maps)」。

拡大縮小させても画像が粗くならないScalable Vector Graphics (SVG)が利用されていて、拡大・縮小可能な綺麗な世界地図が描かれます。

サンプルはこちら

お洒落な世界地図を表示するjQueryプラグイン「JQVMap」サンプル

地図の左上にある「+・-」ボタンで拡大縮小。地図の上でドラッグさせて位置を移動できます。また国の上にマウスを持って行くと吹き出しで国名が表示されます。

設定方法は続きをご覧ください。
→「お洒落な世界地図を表示するjQueryプラグイン「JQVMap(jQuery Vector Maps)」」の続きを読む

Parallax(パララックス)スクロール効果を実現できるJavaScript「skrollr」

Prinzhorn / skrollr

最近、パララックス効果(視差効果)を利用したワンページスクロールサイトをよく見かけるようになりました。スクロールすることで画像や文字に動きや演出が加わり印象的なWebサイトを実現しています。

今回はこのパララックス効果を利用したワンページスクロールサイトを比較的簡単に導入できる「skrollr」を紹介します。

サンプルを作ってみました。

→ Parallax(パララックス)効果を実現できる「skrollr」サンプル

エフェクトや背景画像の組み合わせ次第で、とてもお洒落でクールなワンページのスクロールサイトが実現出来ます。

作り方もエフェクトやコンテンツを<div>要素毎に設定するので比較的わかりやすく導入出来ると思います。

→「Parallax(パララックス)スクロール効果を実現できるJavaScript「skrollr」」の続きを読む