jQuery.appear

JavaScript

ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

jQuery.appearは、元々は非表示となっているものや、ビューポート外にあるコンテンツの表示を防止するためのプラグインです。簡単に言うと、わざわざ表示させる必要がないコンテンツを隠したい時や、それをユーザーの意思で表示させたい時に使用されます。

これまで、このような動作を発生させたい時は、jsライブラリの使用が主流でした。スクロールして初めて画像やテキストが表示されるページなどはそれらが使用されていることが多いです。

それでは、jQuery.appearについて詳しく見てみましょう。

jQuery.appear

デモ

jQuery.appearのデモページで紹介されているのは、ユーザーのページを「スクロール」する動作によって、ページ内のいくつかのタイトルの背景が黄色に自動で変わるというものです。

また、「スクロール」だけではなく、「画面サイズの変更」を行った時にもそれらは発生します。

「画面サイズの変更」とは、テキストサイズの変更だけでなく、ブラウザの表示の切り替え(モニター全画面表示・片面表示など)を行った場合にも発生します。実際にデモページを見てみることをおすすめします。

ページをこのような仕様にした場合のメリットとしては、次のようなことがあります。

通常の見た目がとてもシンプルになる

テキストへの装飾が見られないので、すっきりとしたページが演出できます。

重要なことが必要な時だけユーザーへ伝わる

「スクロール」や「画面サイズの変更」時は、ページ内のどこを見ていたのか見失ってしまうことがあります。jQuery.appearを使用すれば見失いやすい時にだけ、テキストに背景が現れるのでその心配が軽減されます。また、読んでいる箇所以外のテキストが目立ってしまっていると、そちらに目がいってしまいがちです。jQuery.appearを使用すれば、スムーズにページを読み進めることができます。

ブログ記事など読者の興味をしっかり掴む必要があるページよりも、カンパニーサイトや論述的なサイトのように緊張感を全体的に持たせたいサイトにはぴったりのプラグインです。シンプルな仕上がりとなるでしょう。

jQuery.appear

関連記事

  1. no-image

    JavaScript

    インタラクティブなツリー機能を実装できる「jstree」

    jstreeはインタラクティブなツリー機能を実装できるjQueryプラ…

  2. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  3. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

  4. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  5. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  6. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP