Authorpannyatto

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

Responsly.js

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

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

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

などの機能があります。

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

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

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

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

jQueryでページの途中へ縦スクロールさせる『Scroll to Internal Link with jQuery』

1ページのなかで各コンテンツへスクロールさせるデザインのサイト、いわゆる1ページスクロールサイトが最近ポピュラーになってきました。様々なワンページスクロールサイトがありますが、今回はjQueryを使用して、とても簡単にシンプルなワンページサイトを作る方法を紹介します。

サンプルページを作りました。

→ ワンページスクロールサイトに活用できる『Scroll to Internal Link with jQuery』サンプル

段落ごとにスクロールさせることができるので、うまく利用すれば印象的なサイトが作れると思います。

作成方法は続きをご覧下さい。

→「jQueryでページの途中へ縦スクロールさせる『Scroll to Internal Link with jQuery』」の続きを読む

ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」

Backstretch

以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家のサイトの運営が再開されていないようです。

「maxImage Scaling Plugin」と同じように背景に画像をウィンドウズサイズに調節してフルスクリーン表示させることができるのが、このjQueryプラグイン「Backstretch」です。

少し、手を加えることで背景でスライドショーとして画像を流すことも出来ます。

サンプルを3パターン作ってみました。

簡単に設定できるのと、背景画像を最後に表示させることでメインのコンテンツが表示されるまで待つ必要がないのが特徴です。

設定の方法は続きをどうぞ。

→「ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」」の続きを読む

虫眼鏡のように画像の一部を拡大ズームするjQueryプラグイン「Zoomy Jquery Plugin」

Zoomy Jquery Plugin

今回紹介するのは、画像の一部分を虫眼鏡を通したようにズームさせるjQueryプラグイン「Zoomy Jquery Plugin」です。

ネットショップの商品紹介の画像でも使われたりする機能ですね。商品の細かい部分まで伝えることができるようになります。演出的にも面白い機能です。

サンプルを作ってみました。こちらをどうぞ。

→ jQueryプラグイン「Zoomy Jquery Plugin」サンプル

設置の仕方も簡単で、処理も軽くスムーズです。

使い方は続きをご覧ください。

→「虫眼鏡のように画像の一部を拡大ズームするjQueryプラグイン「Zoomy Jquery Plugin」」の続きを読む

テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」

以前にテキストをアニメーションにするjQueryプラグイン『textualizer』をご紹介しましたが、今回はCSSアニメーションを使用して、文章の一部のテキストを演出的に切り替える「Rotating Words with CSS Animations」を紹介します。

サンプルはこちら

→ 「Rotating Words with CSS Animations」サンプル

もうひとつサンプルです。

→ 「Rotating Words with CSS Animations」サンプル2

※CSS3を使用しているため、対応していないブラウザでは動作しません。

詳しくは続きをどうぞ。

→「テキストをCSSアニメーションさせてクールに演出させる「Rotating Words with CSS Animations」」の続きを読む

クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」

ボタンやリンクをクリックすると、隠れていたページが横から現れるページを実装できるjQueryプラグインです。

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

→ 「PageSlide」サンプルページ

セカンドコンテンツには追加情報などの他にも、フォームやメニューを加えたりと利用価値は高そうです。

jQueryプラグイン「PageSlide」の設置方法は続きをどうぞ。

→「クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」」の続きを読む

ページをめくり効果が美しい。雑誌や本のようにページをめくれる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」」の続きを読む