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」
以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。
HTML５とCSS３で作られているようで、IE８以前では作動しないのが残念ですが、将来FlashからHTML5が主流になる可能性を考えると期待大です。
その他のFirefoxなどのブラウザ、タブレット端末やスマートフォン端末には対応しています。
サンプルはこちら。ページの端をクリックするか、ドラッグするとページがめくれます。
jQueryプラグイン「turn.js」の使い方は続きをどうぞ。
Zoomooz.jsは、Webページの要素のズームを行うためのjQueryプラグインです。
画像をズームさせてギャラリー風に見せたり、テキストを一部拡大させて効果的にみせたりすることに使用することができます。しかも設置方法は簡単です。
サンプルはこちらからどうぞ
うまく組み合わせて使えば、アイデア次第ではWEBサイトだけでなく、Preziのようにプレゼンにも使うことも出来そうです。
「Zoomooz.js」の設置方法は続きをご覧ください。
お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。
ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。
サンプルを用意しました。
では、この「mediaboxAdvanced」の使い方は続きをどうぞ。
→「画像、動画、Googleマップ… あらゆるメディアをLightBox（ライトボックス）風に表示させる「mediaboxAdvanced」」の続きを読む
ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。
ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。
サイトのタイトル表示に使えそうな機能です。
サンプルはこちらからどうぞ
また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→ Trent Walton’s blog (http://trentwalton.com)
「FitText」の使用方法は続きをどうぞ。
ページの先頭にスクロールさせる「Back To Top」リンクボタン。最近ではいろいろな「Back To Top」を見かけますが、jQueryを使用したエフェクトやデザイン的にもお洒落に作ってある簡単jQueryプラグインをご紹介します。
サンプルを作ってみました。こちらをご覧ください。
それでは設置方法を説明します。
→「ページの先頭へスクロール。お洒落な「Back To Top」を表示させるjQuery「BackToTop」プラグイン」の続きを読む
サイトの背景で画像をフルスクリーンで表示させて、かつその画像を自動的にスライドショーとして流したいという時に使えるのがこのjQuery「jmaxImage Scaling Plugin」
jQueryを使用して、好きな画像ををサイトの背景でフルスクリーンで流すことができます。
ということで、サンプル作ってみました。こんな感じになります。
→「背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」」の続きを読む
テキストの文字をかっこよく動かして見せたい方にぴったりのjQueryです。
テキストの切り替えのとき文字をいろいろなお洒落なエフェクト効果をかけて動きを出すことができます。
しかも、導入はいたってシンプル簡単です。
サンプルページを作ってみました。ご覧ください。
日本語のテキストでもきちんと表示されていますね。
Photoshopなどのグラフィックソフトウェアなどに搭載されているレイヤー (Layer) とは、画像をセル画のように重ねて使うことができる機能です。
このレイヤーごとに動きを出すことで、アニメーション風に立体感を出すことが出来る便利なjQueryが 「jQuery zLayers Parallax Plugin」です。
サンプルを作ってみましたので、ご覧下さい。
→「画像に立体感と奥行きのある動きを演出することができる『jQuery zLayers Parallax Plugin』」の続きを読む
今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。
おかげで、PCでは縦スクロールが当たり前だった頃に比べて横スクロールさせるUI（ユーザーインターフェイス）が身近になってきました。
jQueryを使用して、簡単に全画面横スクロールで雑誌風にサイトをみせることができるのがこの「treesaver」。スマートフォンにも対応しているので、iPhoneなど指で左右にスクロールさせて表示させたい時に便利です。しかも画面の大きさによって、自動的にレイアウトを変更してくれます。
「treesaver.js」はPython製、HTML5/JavaScript用のオープンソース・ソフトウェアです。テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作ることができます。
この機能を文字では説明しきれないので、紹介の動画をご覧ください。
サンプルを作ってみました。こちらをどうぞ → 「treesaver.js」サンプル
→「iPhone、iPad、PC対応！雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」」の続きを読む
Smooth Vertical or Horizontal Page Scrolling with jQuery
他のサイトと差をつけて、サイトを横スクロールで作成したいときに便利なjQueryプラグインです。印象的かつスムーズに横スクロールします。
まずはサンプルをご覧ください。
→「横スクロールさせたい時の簡単便利なjQueryプラグイン「Smooth Vertical or Horizontal Page Scrolling with jQuery」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑