Categoryレスポンシブ

スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン

Portfoliojs

今回は、デスクトップでもタブレットでもスマホにでも使えるイメージスライダー『Portfoliojs』を紹介します。

このjQueryギャラリープラグイン『Portfoliojs』の特徴は、スマホやタブレット上で指でスワイプして次の画像にスライドできる点。もちろんマウスでもキーボードでもスライドすることができます。

サンプルを作ってみました。見て頂いたほうが分かりやすいと思います。

レスポンシブデザインにぴったりな横スクロールスライダー『Portfoliojs』サンプル

スマホでみてみると、Facebookのタイムライン上でアルバム画像をみた感じに似てますね。狭い画面を有効に活用できるのでとても便利です。

→「スマホでもデスクトップでも使える横スクロールスライダー『Portfoliojs』jQueryギャラリープラグイン」の続きを読む

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」

jQueryプラグイン「Glide.js」を利用すれば、スマホ・タブレット・デスクトップに対応したスライドショーを簡単に設置することができます。

特徴は、スマホなどの画面からスライダーを指でスワイプすることで画像などのコンテンツを切り替えれることです。また4.5kbと超軽量なのでサクサク動きます。

画面の大きさによって自動的にサイズが切り替わるレスポンシブになっています。

タッチデバイスと相性が良いスライダーでは、今のところこのjQueryプラグイン「Glide.js」が一番かもしれません。

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

タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」サンプル

オールドブラウザでも動くように配慮してあるとのこと。スワイプだけでなくキーボードの矢印キーやスライダー上のメニューからも切り替えることができます。

→「タッチデバイス対応のスライダーjQueryプラグイン「Glide.js」」の続きを読む

にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」

スマホやタブレットでメニューを表示させたいときに活用できるレスポンシブタイプのメニュー「Animated Border Menus 」を紹介します。

メニューアイコンをクリックすると、にゅるっと動いて各メニューが現れます。スマホファーストのお洒落なサイトに良いのではないでしょうか。もちろん、パソコンでもいい感じです。

サンプルをご覧下さい。> にゅるっと出てくるスマホで便利なお洒落なメニュー「Animated Border Menus 」サンプル

パソコンの古いブラウザでは動きません。スマホやタブレットでは大丈夫でしょう。

→「にゅるっと出てくるスマホで便利なお洒落メニュー「Animated Border Menus 」」の続きを読む

クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』

今回は、クリックすると上から降りてくるドロップダウンメニューのソースを紹介します。

サンプルをみてもらうとわかりやすいと思います。

「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』サンプル」

レスポンシブ対応のドロップダウンメニューですので、スマホなどでも綺麗に表示されます。jQueryプラグインは使用していません。

→「クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』」の続きを読む

リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」

3D Book Showcase

今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。

ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。

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

『リアルな本を再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」サンプル』

※古いブラウザでは正しく動作しませんので、ご注意下さい。

(サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。)

本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。

→「リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」」の続きを読む

タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」

Animated Responsive Image Grid

画像をタイル上に並べて、一枚ずつの画像を色々なアニメーション効果で切り替えて見せることができるのが「Animated Responsive Image Grid」です。

レスポンシブ対応になっていて、様々なデバイスのディスプレイに合わせて表示されます。

サンプルを見て頂くとわかりやすいと思います。

→ タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその1

→ タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリー「Animated Responsive Image Grid」サンプルその2

オプションを変更することで、多彩なエフェクト効果が可能になっています。

→「タイル上に並べて、画像を切り替えるグリッドタイプ画像ギャラリーjQueryプラグイン「Animated Responsive Image Grid」」の続きを読む

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

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

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

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

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

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

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

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

レスポンシブ対応の画像スライダーを実現するjQueryプラグイン「Responsly.js」

Responsly.js

jQueryプラグインとCSS3 を利用した画像やテキスト用のレスポンシブ対応スライダーです。

このjQueryプラグインを使用すると、スマホやタブレット・デスクトップなど画面サイズの大小に関わらず、スライドショーの幅や画像の大きさを調整してくれます。また、

  • ボタンの自動表示
  • キーボードの左右キー対応
  • 自動でのスライドショー開始

などの機能があります。

まずはこちらのサンプルをご覧ください。

→ 「Responsly.js」サンプルページ

「Responsly.js」を用いたレスポンシブスライドショーの設置方法は続きをどうぞ。

→「レスポンシブ対応の画像スライダーを実現するjQueryプラグイン「Responsly.js」」の続きを読む

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

FitText

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

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

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

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

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

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

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

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 」」の続きを読む