Parallax Fade In Out

by Glynne Turner

HTML

<div class="parallax">
  <div class="slides bg1 active scale">
  </div>
  <div class="slides bg2">
  </div>
  <div class="slides bg3 ">
  </div>
  
</div>

CSS

*{padding:0; margin:0;}
.parallax { height:100vh;min-height: 500px; overflow:hidden;  }
.bg1,.bg2,.bg3{z-index:1;height:100vh; min-height: 500px; background-attachment: absolute; background-position: center; background-repeat: no-repeat;background-size: cover;}
.bg1{  background-image: url("https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202029-1.jpg");}
.bg2{background-image: url("https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202022-1.jpg");}
.bg3{background-image: url("https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI20203-1.jpg");}

 
.bg1,.bg2,.bg3{opacity:0 ; transition: all 0.5s;transition: all 2s ease-in-out;z-index:1 }

.active {opacity: 1 !important;z-index:2}
.scale { transform: scale(1.2); }

JavaScript

$(document).ready(function(){
 
var slides = $('.slides').length;
 alert(slides)
 setTimeout(function() { 
	$('.active').addClass('scale') 
      
	}, 2000); 


})