JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<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> -->
<section>
  <div class="parrallax-holder">
    <div id="BGzoom" class="parrallax">

    </div>
  </div>
  <div class="hero-container">
     <a class="navbar-brand" href="#"><img src ='http://canarytrailevents.com/wp-content/uploads/2019/02/cropped-Canary-site-icon.png' class="logo" alt="Canary Trail Events"></a>
    <div class="content hero animate moveUp  slowly">
      <h1>Header 12</h1>
      <h2>Header 2</h2>
      <h3>Header 3</h3>
      <h4>Header 4</h4>

    </div>
    <div class="content animate bounceInLeft animationDelayLong slowly white">OTHER TEXT HERE
    </div>
  </div>
</section>

<nav class="navbar navbar-expand-md navbar-dark   shadow-sm">
  <div class="container">

    <a class="navbar-brand" href="#"><img src ='http://canarytrailevents.com/wp-content/uploads/2019/02/cropped-Canary-site-icon.png' class="logo" alt="Canary Trail Events"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"...

CSS

@font-face {
  font-family: 'Arial Rounded MT';
  src: url('https://www.thanet-web-design.com/fonts/ArialRoundedMTBold.eot');
  src: url('https://www.thanet-web-design.com/fonts/ArialRoundedMTBold.eot?#iefix') format('embedded-opentype'),
    url('https://www.thanet-web-design.com/fonts/ArialRoundedMTBold.woff2') format('woff2'),
    url('https://www.thanet-web-design.com/fonts/ArialRoundedMTBold.woff') format('woff'),
    url('https://www.thanet-web-design.com/fonts/ArialRoundedMTBold.svg#ArialRoundedMTBold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arial-Rounded';
  src: url('https://www.thanet-web-design.com/fonts/Arial-Rounded.eot');
  src: url('https://www.thanet-web-design.com/fonts/Arial-Rounded.eot?#iefix') format('embedded-opentype'),
    url('https://www.thanet-web-design.com/fonts/Arial-Rounded.woff2') format('woff2'),
    url('https://www.thanet-web-design.com/fonts/Arial-Rounded.woff') format('woff'),
    url('https://www.thanet-web-design.com/fonts/Arial-Rounded.svg#Arial-Rounded') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Arial-Rounded';
}

div {
  font-family: 'Arial-Rounded';
}

.padded {
  padding: 50px 0;
}

h1,
h2,
h3,
h4 {
  font-family: 'Arial Rounded MT';
}
h1 {
  font-size: 7vw;
}

h2 {
  font-size: 6vw;
}

h3 {
  font-size: 5vw;
}

h4 {
  font-size: 4vw;
}

.hero h1,
.hero h2,
.hero h3,
.hero h4 {
  color: #ffffff;
  text-align: center;
}


#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  z-index: -1
}

.hero-container {

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: calc(100vw - 17px);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.content {
  position: relative;
  padding: 10px;
}

.hero-container::before {
  content: "";
  display:...

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');
	
  var navpos = $('nav').offset(), navHeight = $('nav').height();
	    console.log(navpos.top);
	    $(window).bind('scroll', function () {
	        if ($(window).scrollTop() > navpos.top) {
	            $('nav').addClass('navbar-fixed-top'); 
              $('.nav-spacer').addClass('nav-spacer-fixed').css({'height':navHeight});
	        } else {
	            $('nav').removeClass('navbar-fixed-top');
              $('.nav-spacer').removeClass('nav-spacer-fixed');
	        }
	    });
});