jQuery.appear

JavaScript

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

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

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

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

jQuery.appear

デモ

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

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

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

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

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

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

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

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

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

jQuery.appear

関連記事

  1. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  2. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  3. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  4. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  5. Albe Timeline

    JavaScript

    JSONデータを用いたタイムライン実装「Albe Timeline」

    Albe TimelineはJSONデータを用いたカスタマイズ性の高い…

  6. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP