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

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

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

この記事は2017年2月12日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

先日、「コンテンツをスクロールして、要素が画面内に入ったら表示をさせてほしい」という要望を受けました。調査したところ、この動きを実現するには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はパララックスサイトの構築などでよく使われるようです。
確かに、パララックスと相性がよさそうなプラグインなので、今後パララックスサイトの案件がきた時は試してみたいと思いました。

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク