jQuery.appear

JavaScript

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

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

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

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

jQuery.appear

デモ

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

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

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

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

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

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

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

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

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

jQuery.appear

関連記事

  1. no-image

    JavaScript

    レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」

    Modeloは軽量・コンパクトなモーダルボックスを実装できるjQuer…

  2. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  3. jQuery liMarquee
  4. Recursive Hover Nav
  5. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

  6. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP