jQuery.appear

JavaScript

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

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

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

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

jQuery.appear

デモ

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

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

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

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

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

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

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

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

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

jQuery.appear

関連記事

  1. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  2. Warp drive jQuery plugin
  3. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  4. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  5. Freewall

    JavaScript

    レスポンシブ対応のグリッドレイアウトを実装できるjQueryプラグイン「Freewall」

    FreewallというjQueryプラグインを使えばレスポンシブに対応…

  6. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP