日: 2024年5月8日

<div class="flex2box effect-fade  inview left_mask_in">

inview left_mask_in

をつける

inviewは画面に入ったら　.onがつく すると表示される 透明度でopti

left_mask_inはアニメーション用のクラスで、今回の場合はボックス用のhiddenであり親

親にアフターでボックスを背景と同じ色につけて

左から右に動かすアニメーション

http://www.d-marking.com/%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%AB%E3%83%BC%E3%83%97%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84/

//スクロールで見えたら.onがつく
.inview {
    //transition-delay: .4s;
        transition: all 1.5s;
        position: relative;
        opacity: 0;
    }
    .inview.on {
        opacity: 1;
    }


//左から背景ベタがイン
.left_mask_in{ 
    overflow: hidden;
    position: relative;
//設定ベタ
&.inview::after{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    //background-color: #000;
    background-color:#e7f4ff;
    transform: translateX(0%);
    transition: transform ease 1s;
}
//見えたら
&.inview.on::after{
    transform: translateX(100%);
}

}

//なんでも使えるように　.inview が画面に入ったら onがつく  .inview.on
   $('.inview').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
       
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        if (scroll > elemPos - windowHeight + 30){
     $(this).addClass('effect-scroll');
    }
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 100 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('effect-scroll');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight + 200){
     $(this).addClass('on');
    }
}


   } );

//

フッターの

    window.onload = function() {
  scroll_effect();

  $(window).scroll(function(){
   scroll_effect();
  });

  function scroll_effect(){

ここに追記

  }
};
    </script>