BLOG2015.06.30「jQuery.inview」の使い方こんにちは。デザイナーの鈴木です。2回目のブログ登場です。今回もまじめにプラグインの紹介をします。今回は「jQuery.inview」というプラグインを紹介します。読み込んだ一回目にしかアニメーションなどの動作が反応しない欠点がありました。そこで「jQuery.inview」と組み合わせることで細かい挙動が可能になります。ちなみに「jQuery.inview」と「fullPage.js」を組み合わせてWebページも制作しています。(制作したサイトはこちら)「jQuery.inview」とは要素が画面内に現れた時にイベントを実行するjQueryプラグインです。実際の動きは下記ページのデモをご覧ください。※下部にある参考サイトのデモページになります。http://www.dataplan.jp/demo/jquery_inview/「jQuery.inview」の使い方まずは必要なファイルを下記から一式ダウンロード。https://github.com/protonet/jquery.inviewダウンロードしたファイルから下記を読み込みます。jquery.inview.js読み込む記述は下記のようになります。基本的にはhead内か外部JSとして下記のコードを記述すれば、イベントが実行されます。要素が画面に表示された時に実行する処理を記述});htmlの記述方法イベントを発生させたい要素をHTML内に記述します。例として「div」としていますが、実際はタグだけでなく、idやclassでも指定は可能です。CSSを指定し、animateなどを組み合わせることでいろいろな動作が可能になります。「jQuery.inview」の基本的な実装は以上になります。オプション細かい設定としてコールバック関数の引数として「isInView」、「visiblePartX」、「visiblePartY」の3つが用意されています。「isInView」は要素が表示域に見えるかで「true」か「false」になります。「visiblePartX」は要素の左右を基準に表示域に見えるかで「left」、「right」、「both」になります。「visiblePartY」は要素の上下を基準に表示域に見えるかで「top」、「bottom」、「both」になります。要素の全体が表示域に見えてから動作を実行したいなど細かい条件を必要と場合は、「visiblePartX」と「visiblePartY」を組み合わせるといいと思います。実装してみて簡単に実装でき、CSSや実行したい処理を自由に設定でき、とても便利なライブラリでした。パララックスのWEBサイト制作には心強いですよ。jQuery初心者でも導入しやすいので、ぜひ試してみてください!!今回はここまでになります。それではまたの機会に!参考リンク下記サイトは制作するに当たって参考にしたサイトになります。使い方ももっと詳しく紹介しています。詳細が知りたい方はどうぞ!http://c-brains.jp/wp/wsg/13/07/25-095600.phphttp://www.dataplan.jp/wp/jquery/766この記事は1年以上前の記事で内容が古くなっている場合があります。【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。