【jQuery】要素が画面に表示したら処理を行うjquery.inview

今回はWeb制作におけるjQueryの実装に関する内容です。
先日、「コンテンツをスクロールして、要素が画面内に入ったら表示をさせてほしい」という要望を受けました。調査したところ、この動きを実現するにはjquery.inviewを使用すれば簡単に実装できることが判明しました。

プラグインは下記リンク先より取得できます。
https://github.com/protonet/jquery.inview

jquery.inviewの使い方

>> DEMOはこちらから！

>> ページの読み込みが遅い場合はこちら

jquery.inviewの使い方は非常に簡単で.on()によりinviewのイベントを設定するだけです。
そして、.on()内に実行する処理を記述すれば完成です。
今回だと、まずは対象の要素をopacity: 0;によって透明化。
その後、下記のスクリプトでフェードインしながらアニメーションする感じです。

$(function() {
    $('.content .read-delay').on('inview', function() {
        $(this).animate({'opacity': '1'}, 500);
    });
});

jquery.inviewのまとめ

今回扱ったjquery.inviewはパララックスサイトの構築などでよく使われるようです。
確かに、パララックスと相性がよさそうなプラグインなので、今後パララックスサイトの案件がきた時は試してみたいと思いました。

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。