jQuery.appear

JavaScript

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

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

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

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

jQuery.appear

デモ

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

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

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

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

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

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

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

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

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

jQuery.appear

vDrop選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」前のページ

下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」次のページpull-to-reload

関連記事

  1. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  2. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  3. Sticky Slider Navigation(Responsive)
  4. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  5. lightGallery
  6. jQuery Brazzers Carousel Plugin

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP