Carousel Fade

Bootstrap v2.3.2

by Glynne Turner

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<section id="carousel-fade" class="carousel fade">
	 
	<div class="carousel-inner">
		<div class="item">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202029-1.jpg" alt="" width="100%">
       <div class="parallax-content flex-center ">
       <div class="container text-center flex-col  ">
         <div class="content1 slowly fadeInUp animate animationDelayShort">
          content 1 here
          </div>
          <div class="content2 slowly fadeInUp animate animationDelayMed">
          content 2 here
          </div>
          <div class= "content3 slowly fadeInUp animate animationDelayLong">
          content 3 here
          </div> 
        </div>
			  </div>
		</div>
		<div class="item">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI202022-1.jpg" alt="" width="100%">
 
		</div>
		<div class="item">
			<img src="https://thanet-web-design.com/PIZZA/wp-content/uploads/2020/12/PIZZARIACAPRI20203-1.jpg" alt="" width="100%">
			 
		</div>
	</div>
	 
</section>

CSS

.carousel.fade{
	opacity:1
}
.carousel.fade>.carousel-inner>.item{
	-moz-transition:opacity ease-in-out .6s;
	-o-transition:opacity ease-in-out .6s;
	-webkit-transition:opacity ease-in-out .6s;
	transition:opacity ease-in-out .6s;
	left:0 !important;
	opacity:0;
	top:0;
	position:absolute;
	width:100%;
	display:block !important;
	z-index:1; 
}
.carousel.fade>.carousel-inner>.item:first-child{
	top:auto;
	position:relative;
}
.carousel.fade>.carousel-inner>.active{
	opacity:1;
	-moz-transition:opacity ease-in-out 3s;
	-o-transition:opacity ease-in-out 3s;
	-webkit-transition:opacity ease-in-out 3s;
	transition:opacity ease-in-out 3s;
	z-index:2
} 
.item img{transform: scale(1); transition:all 3s;} 
.item.active img {transform: scale(1.2); } 
.flex-center{display: flex !important;flex-direction: row;justify-content: center; align-items: center;} 
.flex-col{display: flex !important;flex-direction: column;justify-content: center; align-items: center; background:red} 
.text-center{ text-align: center;}
.parallax-content {position:absolute; top:0;left:0; width:100vw; height:100vh}
.parallax-content .container{min-height:50%; background:green}
.content1,.content2,.content3{margin:10px auto; padding:30px;}

/* ANIMATIONS */
/*/ ANIMATION /*/
/* initially hide animatable objects */
.animate { visibility: hidden; -webkit-animation-play-state: paused;  -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;
}

/* show objects being animated */
.animated {
  visibility: visible;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;


  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

.slowly {
  -webkit-animation-duration: 1s;
  -moz-animation-duration:...

JavaScript

$('#carousel-fade').carousel({
     
  interval: 8000,
  cycle: true

}); 

$(document).ready(function(){
 $('.carousel-inner .item').first().addClass('active')
})

var doAnimations = function() {

    // Calc current offset and get all animatables
    var offset = $(window).scrollTop() + $(window).height(),
      $animatables = $('.animate');

    // Unbind scroll handler if we have no animatables


    // Check all animatables and animate them if necessary
    $animatables.each(function(i) {
      var $animatable = $(this);
      if (($animatable.offset().top + $animatable.height() - 200) < offset) {
        $animatable.removeClass('animate').addClass('animated');
      } else {	
		$animatable.removeClass('animated').addClass('animate');
	  } 
    });
 };

  // Hook doAnimations on scroll, and trigger a scroll
  $(window).on('scroll', doAnimations);
  $(window).trigger('scroll');
  $(document).ready(function() {
    // we call the function 
    doAnimations();
  });