Who we are? test

by Dejan Munjiza

HTML

<div class="container">
  <div class="title bluronload">
    <div class="floating">Who we
      <br/>are?</div>
    <img src="http://uk.prefa.com/typo3conf/ext/prefa/Resources/Public/Images/product-shadow.png" class="shadow shadowsize" />
  </div>
  <div class="content content-one showcontent" style="background: lightblue;">
    <h3>Page title 1</h3>
    <p>Aenean mauris nisi, tristique vel ultricies at, venenatis in velit. Praesent consectetur libero vel congue porta. Quisque tempor lorem vel dolor ultrices sagittis. Fusce sit amet blandit urna.
    </p>
  </div>
  <div class="content content-two showcontent" style="background: lightgreen;">
    <h3>Page title 2</h3>
    <p>Aenean mauris nisi, tristique vel ultricies at, venenatis in velit. Praesent consectetur libero vel congue porta. Quisque tempor lorem vel dolor ultrices sagittis. Fusce sit amet blandit urna.
    </p>
  </div>
  <div class="content content-three showcontent" style="background: lightyellow;">
    <h3>Page title 3</h3>
    <p>Aenean mauris nisi, tristique vel ultricies at, venenatis in velit. Praesent consectetur libero vel congue porta. Quisque tempor lorem vel dolor ultrices sagittis. Fusce sit amet blandit urna.
    </p>
  </div>
</div>

CSS

html,
body {
  padding: 0;
  margin: 0;
  position: relative;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 90vh;
  float: left;
  margin: 0;
  padding: 0;
}

.title {
  font-size: 56px;
  font-weight: 900;
  font-family: Arial;
  text-transform: uppercase;
  position: relative;
  background: transparent;
  float: left;
  padding-bottom: 80px;
  padding-left: 50px;
  padding-right: 50px;
}

.content {
  display: none;
  width: 500px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  background: white;

}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.shadowsize {
  animation-name: shadowsize;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.bluronload {
  animation-name: bluronload;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  transform: scale(1);
}

.showcontent {
  animation-name: showcontent;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.zoomoutcontent {
  animation-name: zoomoutcontent;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.zoomoutcontenttwo {
  animation-name: zoomoutcontenttwo;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  from {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0, 20px);
  }
  to {
    transform: translate(0, -0px);
  }
}

@keyframes shadowsize {
  from {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }
  65% {
    width: 120%;
    margin-left:...

JavaScript

$(document).ready(function() {
  setTimeout(function() {
    $('.content-one').fadeIn('slow');
  }, 2500);

  setTimeout(function() {
    $('.content-one').removeClass('showcontent');
    $('.content-one').addClass('zoomoutcontent');
    $('.content-two').fadeIn('slow');
  }, 5000);
  
  setTimeout(function() {
    $('.content-two').removeClass('showcontent');
    $('.content-two').addClass('zoomoutcontenttwo');
    $('.content-three').fadeIn('slow');
  }, 7500);
});