【jQuery】要素が画面内に入ったら表示する

要素が画面に入ったかどうかの判定にはjquery.inviewを使うと楽。

GitHub – protonet/jquery.inview

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

【jQuery】要素が画面内に入ったかどうかを判定する方法

opacityが使いやすい

サンプル

「要素が画面に入ったら表示する」ときにはopacityが便利。

「要素が画面に入ったら表示する」をopacityで実現する方法

要素のopacityを0(= 透明度100%)にしておく
要素が画面に入ったらopacityを1(= 透明度0%・不透明)にする

非表示であっても要素自体は存在する(= 見えなくなるだけで、高さや幅はきちんと確保される)ので、レイアウトが乱れることはない。

要素のopacityを0にするときは、CSSではなくjsで設定すると良い。そうすれば、非表示(= 初期状態)・表示の両方の処理をjsでやるので統一感があって良い。

逆に、「CSSで非表示(= 初期状態)・jsで表示」とすると、「非表示はCSS」と「表示はjs」のように処理が分散してしまって統一感がなくなり、後から見たときに分かりにくくなる。

HTML



     




画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される
画面に入ると表示される

CSS


.item {
    font-size: 16px;
    padding: 10px;
    border: 1px solid red;
    margin-bottom: 500px;
}

jQuery


$(function(){
    //事前に要素のopacityを0(= 透明度100%)にしておく
    $('.item').css('opacity', 0);

    //要素が画面に入ったらopacityを1(= 透明度0%・不透明)にして表示する
    $('.item').on('inview', function(event, isInView) {
        if(isInView) { 
            $(this).animate({
                opacity : 1.0
            }, 1000);
        }
    });
});

その他の方法

色々考えられるが、opacityの方が良い。理由は以下参照。

visibility

CSS


visibility : hidden;  /* 非表示 */
visibility : visible; /* 表示 */

単に「非表示 → 表示」とするだけならcss()で処理できるので簡単。

非表示であっても要素自体は存在する(= 見えなくなるだけで、高さや幅はきちんと確保される)ので、opacityと同様に非表示時でもレイアウトが乱れることもない。

ただし、animate()はvisibilityに非対応なので時間をかけてジワッと表示させたいときなどには使えない。

MEMO

animate()は数値を設定するようなプロパティにしか使えない(文字サイズ変更など)ので、visibilityの変更は無理。

※別途プラグイン等があれば文字の色くらいは変えられるらしい(詳細は調べていない)

そのあたりを考慮するとopacityの方が使いやすい。

display

CSS


display : none;  /* 非表示 */
display : block; /* 表示 */

noneを設定すると要素自体が非表示になる(= 高さや幅も消える)ので、レイアウトが乱れる場合がある。

そもそも、noneの状態だと「画面に入っている or 入っていない」の判定すらできなくなるので、「要素が画面に入ったら表示する」という処理にはdisplayは使えない。

.offset() | jQuery API Documentation

view-source:https://api.jquery.com/offset/#offset

jQuery does not support getting the offset coordinates of hidden elements

opacityが使いやすい

その他の方法

visibility

display

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル