<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であり親
親にアフターでボックスを背景と同じ色につけて
左から右に動かすアニメーション
//スクロールで見えたら.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>