レベルF株式会社

要素が画面に表示されたら発火、jquery.inviewの使い方
レベルF株式会社のブログとなります。
業務についてから社員のつぶやきまで日々更新してまいります。
HOME >レベルFのブログ > cssテクニック・jQuery > 要素が画面に表示されたら発火、jquery.inviewの使い方

要素が画面に表示されたら発火、jquery.inviewの使い方

こんにちは。弊社、新宿区から渋谷区へ移転させていただきました。オフィスは木を基調としたデスク・インテリアが主な為、お客様にも『Woody(ウッディー)ですね!』とお褒めの言葉を頂きました。今後益々人も増えていきそうな気配がする中、今回はjQueryのプラグインであるjquery.inviewのご紹介・及び簡単な使用方法をご紹介させていただきます。

jquery.inviewとは?

こちらのプラグインは要素が画面内に表示された際に処理を発生させるものとなります。様々なWebサイトを観覧していると、下からフワッとテキストが浮かんできたり、横からニョキっと画像が表示されたりする動きを見た事があると思いますが、あの動きを簡単に実装出来てしまうとても優秀で柔軟性の高いプラグインとなります。HTML及びCSSの知識が最低限あればどなたでも実装出来ると思いますので、jQueryに苦手意識がある方も是非この機会にお試し下さい。それではまず下準備を行っていきましょう。

実装に必要なもの

■jQuery(本体)
■jquery.inview
jquery.inviewのダウンロードはこちらから(GitHub)

具体的な実装方法


前回同様、実装サンプルのZIPファイルを用意しておきます。
サクッと実装してしまいたい方はこちらをご使用下さい。
実装サンプルのDLはこちら

それではまずHTML

次にCSS

最後にちょこっとjQuery

※jQuery1系・2系を使用するのであれば今回の様にcssでdisplay:none;を使用せずに、jQueryのコード内に

としてあげてもいいかもしれません。

【if】が画面内に入った時の動きで【else】が戻り値となります。

まとめ

いかがでしたでしょうか?
今回はユーザーの視覚(画面表示)に入った時点で要素に動きを与える事が可能になるjQueryプラグイン、jquery.inviewの実践についてご紹介させていただきました。サイト全ての要素に実装しアクティビティー溢れる印象を与える・強い印象を与えたい要素のみに実装しインパクトを狙う等、様々な目的用途に応じて使い分ける事が可能と考えますので、是非1度お試し頂けましたら幸いです。


Pick Up

Blog Category

Newest Blog

Blog Ranking

  1. チェックボックスをcssをいじっておしゃれにする方法チェックボックスをcssをいじっておしゃれにする方...
  2. JQueryを使わずにCSSのみで画像ポップアップを実装してみました。JQueryを使わずにCSSのみで画像ポップアップ...
  3. 要素が画面に表示されたら発火、jquery.inviewの使い方要素が画面に表示されたら発火、jquery.inv...
  4. スペースをうまく使ったシンプルで美しい名刺デザインの制作スペースをうまく使ったシンプルで美しい名刺デザイン...
  5. スクロールしても着いてくる固定メニュースクロールしても着いてくる固定メニュー...

お客様の期待値以上の成果物をお届けいたします。

レベルF株式会社は、ホームページ制作・運営コンサルティング会社を中心業務とし
都内、新宿・渋谷・池袋を中心に多くの企業様のお手伝いをしております。
ホームページのみにこだわらず名刺やパンフレットなどそれぞれ理想のお付き合いをさせていただくべく、
幅広いご提案をさせていただき、貢献させていただいております。
どんな些細な事でもお気軽にお問い合わせくださいませ。