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」
今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。
このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。
サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。
スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。
→「スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン」の続きを読む
jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。
特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。
画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。
タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。
サンプルを作ってみました。
オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。
スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。
メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。
パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。
今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。
サンプルをみてもらうとわかりやすいと思います。
レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。
→「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』」の続きを読む
今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。
ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。
サンプルを作ってみました。
※古いブラウザでは正しく動作しませんので、ご注意下さい。
（サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。）
本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。
→「リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」」の続きを読む
Animated Responsive Image Grid
画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。
レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。
サンプルを見て頂くとわかりやすいと思います。
オプションを変更することで、多彩なエフェクト効果が可能になっています。
→「タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」」の続きを読む
最近、特に女性に人気があるPinterest（ピンタレスト）。
その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。
Pinterest（ピンタレスト）は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。
そのPinterest（ピンタレスト）風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。
サンプルページを作ってみました。
jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。
→「Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」」の続きを読む
jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。
このjQueryプラグインを使用すると、スマホやタブレット・デスクトップなど画面サイズの大小に関わらず、スライドショーの幅や画像の大きさを調整してくれます。また、
などの機能があります。
まずはこちらのサンプルをご覧ください。
「Responsly.js」を用いたレスポンシブスライドショーの設置方法は続きをどうぞ。
ブラウザのウィンドウズサイズ、またはiPhoneなどデバイスの画面の大きさに合わせてテキストの大きさを自動で調整してくれるのがこのjQuery「FitText」です。
ウィンドウズサイズにあわせて、文字が大きくなったり小さくなったりします。
サイトのタイトル表示に使えそうな機能です。
サンプルはこちらからどうぞ
また、こちらのサイトではうまく「FitText」を使用されています。このように主にタイトルに使う機会が多そうですね。→ Trent Walton’s blog (http://trentwalton.com)
「FitText」の使用方法は続きをどうぞ。
今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。
おかげで、PCでは縦スクロールが当たり前だった頃に比べて横スクロールさせるUI（ユーザーインターフェイス）が身近になってきました。
jQueryを使用して、簡単に全画面横スクロールで雑誌風にサイトをみせることができるのがこの「treesaver」。スマートフォンにも対応しているので、iPhoneなど指で左右にスクロールさせて表示させたい時に便利です。しかも画面の大きさによって、自動的にレイアウトを変更してくれます。
「treesaver.js」はPython製、HTML5/JavaScript用のオープンソース・ソフトウェアです。テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作ることができます。
この機能を文字では説明しきれないので、紹介の動画をご覧ください。
サンプルを作ってみました。こちらをどうぞ → 「treesaver.js」サンプル
→「iPhone、iPad、PC対応！雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑