JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<div class="bg-animated">

</div>

<div class="container">
    <div id="logo">
        <ximg src="http://www.emergeinteractive.com/assets/images/hero-overlay.png" >
    </div>
    <div id="main">
      
    </div>
</div>

CSS

@-webkit-keyframes 'animated-background-zoom' {
  0% {
    background-size: 100%;
    background-position: 50% 100%;
/*    opacity: 0.4;*/
    -webkit-transform: translate3d(0, 0, 0);
  }
/* IMAGE 1 */
/* http://www.greggant.com/emerge/codepen/hood1.jpg */
  50% {
    background-size: 150%;
    background-position: 10% 80%;
    background-image: url("http://www.artisanaljavascript.com/images/tradition.jpg");
  }
/* IMAGE 2 */
  53% {
    background-image: url("http://www.artisanaljavascript.com/images/tradition.jpg");
  }
/* IMAGE 2 */
  98% {
    background-image: url("http://www.artisanaljavascript.com/images/tradition.jpg");
  }
  100% {
    background-size: 100%;
    background-position: 50% 100%;
  }
}
@keyframes 'animated-background-zoom' {
  0% {
    background-size: 100%;
    background-position: 50% 100%;
    opacity: 0.4;
    -webkit-transform: translate3d(0, 0, 0);
  }
/* IMAGE 1 */
  50% {
    background-size: 150%;
    background-position: 10% 80%;
    background-image: url("http://www.artisanaljavascript.com/images/tradition.jpg");
  }
/* IMAGE 2 */
  53% {
    background-image: url("http://www.artisanaljavascript.com/images/tradition.jpg");
  }
/* IMAGE 2 */
  98% {
    background-image: url("http://www.artisanaljavascript.com/images/tradition.jpg");
  }
  100% {
    background-size: 100%;
    background-position: 50% 100%;
  }
}
.container {
  background-color: #abebfe;
  z-index: 1;
  position: relative;
  top: 0;
  text-align: Center;
  min-height: 600px;
  -webkit-transform: translate3d(0, 0, 0);
}

#main {
  position: absolute;
  width: 100%;
  height: 100%;

/* IMAGE 1 */
  background-image: url("http://www.artisanaljavascript.com/images/tradition.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center 100%;
/*  opacity: 0.4;*/
  -webkit-animation: 'animated-background-zoom' 50s;
  animation: 'animated-background-zoom' 50s;
}

#logo {
  top: 0;
  opacity: 0.999 !important;
  position: absolute;
  z-index:...

JavaScript

/*
// uses animated_bg.js
//http://webdesignerwall.com/tutorials/animating-background-colors
$(document).ready(function() {
		$('.container').animatedBG({
				colorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'],
				speed: 2000
		});
});
*/

// Simple maths for for smart resizing of the background. It gets the height of logo and sizes appropriately the container to scaled proportional to the logo image.

function resizer() {
		var height = $("#logo img").height();
//		height = height * .708;
		height = height * 8;
		$("#main").height(height);
		$(".container").css("min-height", height);
};
$(window).resize(function() {
		resizer();
}).resizer();