要素が画面に入ったかどうかの判定にはjquery.inviewを使うと楽。
GitHub – protonet/jquery.inview
【jQuery】要素が画面内に入ったかどうかを判定する方法
opacityが使いやすい
「要素が画面に入ったら表示する」ときにはopacityが便利。
- 要素のopacityを0(= 透明度100%)にしておく
- 要素が画面に入ったらopacityを1(= 透明度0%・不透明)にする
非表示であっても要素自体は存在する(= 見えなくなるだけで、高さや幅はきちんと確保される)ので、レイアウトが乱れることはない。
要素のopacityを0にするときは、CSSではなくjsで設定すると良い。そうすれば、非表示(= 初期状態)・表示の両方の処理をjsでやるので統一感があって良い。
逆に、「CSSで非表示(= 初期状態)・jsで表示」とすると、「非表示はCSS」と「表示はjs」のように処理が分散してしまって統一感がなくなり、後から見たときに分かりにくくなる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <script src="jquery.inview.min.js"></script> <!-- ローカルにDLして使う --> </head> <!-- 略 --> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> <p class="item">画面に入ると表示される</p> |
|
1 2 3 4 5 6 7 8 |
.item { font-size: 16px; padding: 10px; border: 1px solid red; margin-bottom: 500px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(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
|
1 2 3 4 |
visibility : hidden; /* 非表示 */ visibility : visible; /* 表示 */ |
単に「非表示 → 表示」とするだけならcss()で処理できるので簡単。
非表示であっても要素自体は存在する(= 見えなくなるだけで、高さや幅はきちんと確保される)ので、opacityと同様に非表示時でもレイアウトが乱れることもない。
ただし、animate()はvisibilityに非対応なので時間をかけてジワッと表示させたいときなどには使えない。
animate()は数値を設定するようなプロパティにしか使えない(文字サイズ変更など)ので、visibilityの変更は無理。
※別途プラグイン等があれば文字の色くらいは変えられるらしい(詳細は調べていない)
そのあたりを考慮するとopacityの方が使いやすい。
display
|
1 2 3 4 |
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
コメントを残す