【javascript】MV / メインビジュアル 手前からふわっと【CSS】

.carousel-inner .item picture img {
    width: auto;
    transform: scale(1.15);
}

.carousel-inner.animate .item picture img {
	  transform: scale(1);
    transition: 2s ease-out;
	  transition-timing-function:cubic-bezier(.075,.82,.165,1)
}

 

<script>
	jQuery(document).ready(function($){
		// メインビジュアル手前からふわっと
		$(".carousel-inner").addClass('animate');
		$(".carousel-inner").each(function(i){
			$(this).delay(i*700).queue(function(next){
				$(this).addClass('animate');next();});});if($('.carousel-inner').length){setTimeout(function(){$(".carousel-inner pan").each(function(i){$(this).delay(i*50).queue(function(next){$(this).addClass('animate');next();});});},500);};$(window).on('scroll load',function(i){var scTop=$(this).scrollTop();var scBottom=scTop+$(this).height();$('.inview').each(function(i){var thisPos=$(this).offset().top+100;if(thisPos<scBottom){$(this).addClass('animate');}
				});
				});
	});
</script>