Webデザイン学習まとめ

~職業訓練で学んだ情報の備忘録~

JavaScript jQuery アニメーション

要素が画面に表示されたらカーテンが開くアニメーション

#JavaScript, #jQuery

要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。
ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要です。

  1. 自分のスクロール量
  2. :画面トップから対象要素のトップまで位置
  3. :画面の高さ
  4. :対象要素の高さ


まず、1と2を使って自身のスクロール量と対象要素の位置が同じになったタイミング（要素が画面の上端に到達したら）でaddClassします。
この時の計算式は1 = 2になります。

さらに3の値を使って、addClassするタイミングを1画面分下にします。
1 = 2-3

最後に4の値を使って今度は逆に要素の高さ分addClassするタイミングを上にします。
1 = 2-3+4

さらに上記の式を応用して、要素が画面の中央に来たらaddClassというのも可能です。
その場合には対象要素の半分の高さと画面の半分の高さが必要になります。

1 = 2 – 3/2(1画面分の半分の値) + 4/2(対象要素の高さの半分の値)

jquery

$(function(){
　$(window).on(‘scroll resize’,function(){
　　let h =$(‘p’).outerHeight(); //対象要素の高さ
　　$(‘p’).each(function(){
　　　var elmTop=$(this).offset().top + 200; //画面topから対象要素のtopまでの距離
　　　var winHeight=$(window).height(); //1画面分の高さ
　　　var scrTop=$(window).scrollTop(); //自分がスクロールした量

　　　//自分のスクロール量>対象要素の位置-1画面分+要素の高さ
　　　if(scrTop > elmTop – winHeight + h){
　　　　$(this).addClass(‘curtain’);
　　　}else{
　　　　$(this).removeClass(‘curtain’);
　　　}
　　});
　});
});

参考サイト