あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】要素が画面に表示されると処理を行うjquery.inview

【jQuery】要素が画面に表示されると処理を行うjquery.inview

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

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

jquery.inviewの使い方

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

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

jquery.inviewのまとめ

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