JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<link rel="preload" href="https://www.thanet-web-design.com/fonts/ArialRoundedMTBold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://www.thanet-web-design.com/fonts/Arial-Rounded.woff2" as="font" type="font/woff2" crossorigin>

<!--<div id="video">
<div class="YTcontainer">
<iframe id="YTvideo"  src="https://www.youtube.com/embed/Xxy-ZY7Pwqw?autoplay=1&autohide=2&mute=1&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=2&showinfo=1   " title="YouTube video player" frameborder="0"  allowfullscreen></iframe>

</div>
</div> -->
<div class="parrallax-holder">
<div id="BGzoom" class="parrallax">

</div>
</div>

CSS

.videoContainer {

}
 
iframe {
/* optional */
width: 100%;
height: 100%;
}




.white{color:#ffffff;text-align:center}
.link{margin-top:40px; text-align:center; }
.link a{color:orange; font-weight:bold; text-decoration:none}
 

 
/*#DIV_1*/
 .zoomable {
    -webkit-transition:all 2s ease-out;
    transition:all 2s ease-out;
}
.zoomer {
    -webkit-transform:scale(1.3);
    transform:scale(1.3);
}


.YTcontainer{width:100%; height:100%; overflow:hidden}
  
  
#YTvideo{display:none;z-index:-1;width:100%; height:100%; overflow:hidden}
/*/ ANIMATION /*/
/* initially hide animatable objects */

JavaScript

jQuery(function($) {
  
  // Function which adds the 'animated' class to any '.animatable' in view
  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() -50 ) < offset) {
        $animatable.removeClass('animate').addClass('animated');
			} 
    });

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

var fn = function(){$('#YTvideo').fadeIn(5000)};
window.onload = function() {
setTimeout( function(){ fn();window.onload() },1000)
 
};
 
    
});

$(document).ready(function () { 
 
        $('.parrallax').addClass(' zoomable zoomer');
 
});