scss 木村さん_ホテルオリエンタル心斎桥アニメーション

Posted 2021-05-17

$(function() {
//繰り返し処理（結構うるさいページになる）
	$('.fade_up,.fade_down,.fade_down_d,.fade_up_d,.fade_left,.fade_right,.fade_left_d,.fade_right_d').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('fade');
		}
		else{
			$(this).stop().removeClass('fade');
		}
	});
//1度のみ実行
	$('.fade_up,.fade_down,.fade_down_d,.fade_up_d,.fade_left,.fade_right,.fade_left_d,.fade_right_d').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('fade');
		}
	});
});

.fade_down {
	opacity: 0;
	transition: .8s;
	transform: translate(0,-50px);
	@include mq(min_max_h,700px,900px) {
		transform: translate(0,-40px);
	}
	@include mq(tab) {
		transform: translate(0,-40px);
	}
	@include mq(sp) {
		transform: translate(0,-30px);
	}
}

.fade_up {
	opacity: 0;
	transition: .8s;
	transform: translate(0,50px);
	@include mq(min_max_h,700px,900px) {
		transform: translate(0,40px);
	}
	@include mq(tab) {
		transform: translate(0,40px);
	}
	@include mq(sp) {
		transform: translate(0,30px);
	}
}

.fade_down_d {
	opacity: 0;
	transition: .8s;
	transition-delay: .85s;
	transform: translate(0,-50px);
	@include mq(min_max_h,700px,900px) {
		transform: translate(0,-40px);
	}
	@include mq(tab) {
		transform: translate(0,-40px);
	}
	@include mq(sp) {
		transform: translate(0,-30px);
	}
}

.fade_up_d {
	opacity: 0;
	transition: .8s;
	transition-delay: .85s;
	transform: translate(0,50px);
	@include mq(min_max_h,700px,900px) {
		transform: translate(0,40px);
	}
	@include mq(tab) {
		transform: translate(0,40px);
	}
	@include mq(sp) {
		transform: translate(0,30px);
	}
}

.fade_right {
	opacity: 0;
	transition: .8s;
	transform: translate(50px,0);
	@include mq(min_max_h,700px,900px) {
		transform: translate(40px,0);
	}
	@include mq(tab) {
		transform: translate(40px,0);
	}
	@include mq(sp) {
		transform: translate(40px,0);
	}
}

.fade_left {
	opacity: 0;
	transition: .8s;
	transform: translate(-50px,0);
	@include mq(min_max_h,700px,900px) {
		transform: translate(-40px,0);
	}
	@include mq(tab) {
		transform: translate(-40px,0);
	}
	@include mq(sp) {
		transform: translate(-40px,0);
	}
}

.fade_right_d {
	opacity: 0;
	transition: .8s;
	transition-delay: .85s;
	transform: translate(50px,0);
	@include mq(min_max_h,700px,900px) {
		transform: translate(40px,0);
	}
	@include mq(tab) {
		transform: translate(40px,0);
	}
	@include mq(sp) {
		transform: translate(40px,0);
	}
}

.fade_left_d {
	opacity: 0;
	transition: .8s;
	transition-delay: .85s;
	transform: translate(-50px,0);
	@include mq(min_max_h,700px,900px) {
		transform: translate(-40px,0);
	}
	@include mq(tab) {
		transform: translate(-40px,0);
	}
	@include mq(sp) {
		transform: translate(-40px,0);
	}
}

.fade {
	opacity: 1.0;
	transform: translate(0,0);
}