仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

要素が画面上に表示されたタイミングで処理を行うjQueryプラグイン「jquery.inview」

公開日:

jQuery

要素が画面上に表示されたタイミングで処理を行うjQueryプラグイン「jquery.inview」

 

色々なWEBサイトを見ていてページをスクロールしていくと、ブラウザの画面上に表示されたタイミングで画像や要素が出現したりなど、様々なイベントを発生しているサイトを見ることがあります。

 

今回はある特定の要素が画面に現れたタイミングで処理を行うことができるjQueryのプラグイン「jquery.inview」をご紹介します。「jquery.inview」を使用すると要素が見えたタイミングでイベントを発生することができるので動きのあるページを作成することが可能になります。

 

ランディングページなどで注目させたい箇所やアピールしたい箇所に動きをつけて、閲覧者に興味を惹かせることができるかもしれませんね。

 

 

「jquery.inview」で画面に表示された時に処理を実行

今回は、指定した要素が画面に表示されたタイミングでフェードインして要素を出現させる方法を記述します。

 

下記のページから「jquery.inview」をダウンロードします。

https://github.com/protonet/jquery.inview

 

 

ファイル読込

jQuery、ダウンロードした「jquery.inview」を読み込みます。

 

 

HTML

イベントを発生させたい要素をHTML内に記述します。

 

 

JS

基本的には下記の記述でイベントを発生させることができます。

 

下記は最初に指定した要素を透過させ、要素が表示されたタイミングでアニメーションを行うように指定しています。
また、引数で要素が表示されたかどうかなどの値を取得することができます。

 

「isInView」→true、false
「visiblePartX」→left、right、both
「visiblePartY」→top、bottom、both

「both」は「上下」「左右」の両方が表示された場合です。

 

 

サンプル

「jquery.inview」を使用したデモページを作成しました。
スクロールして画面に表示されると要素が現れます。

 

「jquery.inview」を使用したデモページ

 

 

まとめ

とても使いやすくて、いい感じです。
実行したい処理を自由に設定することができるので、ページに様々な動きを演出することができるかと思います。
ランディングページを制作する際などに活用できるのでおすすめです。

 

是非、チェックしてみてください。

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00