CategoryjQueryプラグイン

ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」

turn.js

以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。

HTML5とCSS3で作られているようで、IE8以前では作動しないのが残念ですが、将来FlashからHTML5が主流になる可能性を考えると期待大です。

その他のFirefoxなどのブラウザ、タブレット端末やスマートフォン端末には対応しています。

サンプルはこちら。ページの端をクリックするか、ドラッグするとページがめくれます。

→ ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」サンプル


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

→「ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」」の続きを読む

好きな要素をにゅるっとズーム(拡大)させるjQueryプラグイン「Zoomooz.js」

Zoomooz.js

Zoomooz.jsは、Webページの要素のズームを行うためのjQueryプラグインです。

画像をズームさせてギャラリー風に見せたり、テキストを一部拡大させて効果的にみせたりすることに使用することができます。しかも設置方法は簡単です。

サンプルはこちらからどうぞ

→ 好きな要素をにゅるっとズーム(拡大)させるjQueryプラグイン「Zoomooz.js」サンプル


うまく組み合わせて使えば、アイデア次第ではWEBサイトだけでなく、Preziのようにプレゼンにも使うことも出来そうです。

「Zoomooz.js」の設置方法は続きをご覧ください。

→「好きな要素をにゅるっとズーム(拡大)させるjQueryプラグイン「Zoomooz.js」」の続きを読む

画像、動画、Googleマップ… あらゆるメディアをLightBox(ライトボックス)風に表示させる「mediaboxAdvanced」


mediaboxAdvanced

お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。

ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。

サンプルを用意しました。

→ あらゆるメディアをLightBox風に表示させるJavaScript「mediaboxAdvanced」サンプルページ


では、この「mediaboxAdvanced」の使い方は続きをどうぞ。

→「画像、動画、Googleマップ… あらゆるメディアをLightBox(ライトボックス)風に表示させる「mediaboxAdvanced」」の続きを読む

ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」

FitText

ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。

ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。
サイトのタイトル表示に使えそうな機能です。

サンプルはこちらからどうぞ

→ ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」サンプル


また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→ Trent Walton’s blog (http://trentwalton.com)

「FitText」の使用方法は続きをどうぞ。

→「ウィンドウサイズに合わせて文字の大きさを変更するjQuery「FitText」」の続きを読む

ページの先頭へスクロール。お洒落な「Back To Top」を表示させるjQuery「BackToTop」プラグイン

MyjQueryPlugins BackToTop plugin
ページの先頭にスクロールさせる「Back To Top」リンクボタン。最近ではいろいろな「Back To Top」を見かけますが、jQueryを使用したエフェクトやデザイン的にもお洒落に作ってある簡単jQueryプラグインをご紹介します。

サンプルを作ってみました。こちらをご覧ください。

 jQuery「BackToTop」サンプルページ


それでは設置方法を説明します。

→「ページの先頭へスクロール。お洒落な「Back To Top」を表示させるjQuery「BackToTop」プラグイン」の続きを読む

背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」

サイトの背景で画像をフルスクリーンで表示させて、かつその画像を自動的にスライドショーとして流したいという時に使えるのがこのjQuery「jmaxImage Scaling Plugin」

jQueryを使用して、好きな画像ををサイトの背景でフルスクリーンで流すことができます。

ということで、サンプル作ってみました。こんな感じになります。

→ 「maxImage Scaling Plugin」サンプルページ


→「背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」」の続きを読む

テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」

テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。
テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すことができます。

しかも、導入はいたってシンプル簡単です。

サンプルページを作ってみました。ご覧ください。

→ テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」サンプル


日本語のテキストでもきちんと表示されていますね。

→「テキストをアニメーション風にお洒落に切り替えるjQueryプラグイン「textualizer」」の続きを読む

画像に立体感と奥行きのある動きを演出することができる『jQuery zLayers Parallax Plugin』

Photoshopなどのグラフィックソフトウェアなどに搭載されているレイヤー (Layer) とは、画像をセル画のように重ねて使うことができる機能です。

このレイヤーごとに動きを出すことで、アニメーション風に立体感を出すことが出来る便利なjQueryが 「jQuery zLayers Parallax Plugin」です。

サンプルを作ってみましたので、ご覧下さい。

→ 「jQuery zLayers Parallax Plugin」サンプル


→「画像に立体感と奥行きのある動きを演出することができる『jQuery zLayers Parallax Plugin』」の続きを読む

iPhone、iPad、PC対応!雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」

今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。

おかげで、PCでは縦スクロールが当たり前だった頃に比べて横スクロールさせるUI(ユーザーインターフェイス)が身近になってきました。

jQueryを使用して、簡単に全画面横スクロールで雑誌風にサイトをみせることができるのがこの「treesaver」。スマートフォンにも対応しているので、iPhoneなど指で左右にスクロールさせて表示させたい時に便利です。しかも画面の大きさによって、自動的にレイアウトを変更してくれます。

「treesaver.js」はPython製、HTML5/JavaScript用のオープンソース・ソフトウェアです。テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作ることができます。

この機能を文字では説明しきれないので、紹介の動画をご覧ください。



サンプルを作ってみました。こちらをどうぞ → 「treesaver.js」サンプル

→「iPhone、iPad、PC対応!雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」」の続きを読む

横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」


Smooth Vertical or Horizontal Page Scrolling with jQuery


他のサイトと差をつけて、サイトを横スクロールで作成したいときに便利なjQueryプラグインです。印象的かつスムーズに横スクロールします。

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

→ Smooth Vertical or Horizontal Page Scrolling with jQueryプラグインサンプル


→「横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」」の続きを読む