2 . I Love The Beach - Responsive Images - Picturefill.js <picture> & srcset=""

background-image <img> Center Image & Text - Animation - VH VW - SASS On Load - Full width & Height - JQuery - CSS - Flexbox - Transform & @Keyframes - align-items - justify-content

by Ben Graham

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>
<div class="container">
  <picture>
    <source media="(max-width:400px)" srcset="https://bengraham.io/wp-content/uploads/iPhone-SE.png" />
    <source media="(max-width:767px)" srcset="https://bengraham.io/wp-content/uploads/iPhone.png" />
    <source media="(max-width:1100px)" srcset="https://bengraham.io/wp-content/uploads/iPad-Pro-6.png" />
    <source media="(max-width:10000px)" srcset="https://bengraham.io/wp-content/uploads/Ultra-HD.png" />
    <img srcset="https://bengraham.io/wp-content/uploads/Ultra-HD.png" />
  </picture>
  <div class="two">
    <h1>I <span> &hearts; </span> The Beach</h1>
  </div>
</div>

CSS

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}

.two {
  width: 90vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border: 1px solid #DCDCDC;
}

img {
  position: fixed;
  width: 100vw;
  height: auto;
  top: 0vh;
  left: 0vw;
}

h1 {
  font-size: 3em;
  color: #1ec8ff;
  text-align: center;
}

span {
  color: yellow;
  display: inline-block;
}

.scaledIt {
  -webkit-animation: scaleUp .8s infinite;
  -moz-animation: scaleUp .8s infinite;
  -o-animation: scaleUp .8s infinite;
  animation: scaleUp .8s infinite;
}

@-webkit-keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@-moz-keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@-o-keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

@media screen and (min-width:768px) {
  h1 {
    font-size: 4em;
  }
}

JavaScript

$('span').addClass('scaledIt');