JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
         <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://www.lhpublicity.ie/wp-content/uploads/2011/06/prince-rocks-out-at-the-garden2011.jpg"></img>
            </div>
        </div>
  </div>
<div id="two"></div>

CSS

#myCarousel{
    height:500px;
    width:100%;
}
#myCarousel img{
    height:500px;
    width:100%;
}
#two{
    height:1000px;
}

JavaScript

$(window).scroll(function(){
    var x = $(this).scrollTop(),
        transY = (x * 0.5), scale = 1 + (x * 0.0003),
        transform = 'translateY('+transY+'px) scale('+scale+') translate3d(0,0,0)';
    $('#myCarousel .carousel-inner').css({
      opacity: 1 - (x * 0.0008),
      WebkitTransform: transform,
      MozTransform: transform,
      msTransform: transform,
      transform: transform
    });
  });