アニメーションメモ

<div class="flex2box effect-fade inview left_mask_in">
<div class="flex2box effect-fade inview left_mask_in">
<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%);
}
}
//スクロールで見えたら.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%); } }
//スクロールで見えたら.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');
}
}
} );
//
//なんでも使えるように .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'); } } } ); //
//なんでも使えるように .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>
window.onload = function() { scroll_effect(); $(window).scroll(function(){ scroll_effect(); }); function scroll_effect(){ ここに追記 } }; </script>
    window.onload = function() {
  scroll_effect();

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

  function scroll_effect(){

ここに追記

  }
};
    </script>