svg role="img"
    title.title Random Words!    

    text.word x="50%" y="50%" text-anchor="middle" fill="#222" stroke="#222" stroke-width="1.5%" dominant-baseline="central" stroke-linecap="round" Random Words!

    text.word x="50%" y="50%" text-anchor="middle" fill="white" dominant-baseline="central" Random Words!

p Made with <b>&hearts;</b> by <a href="https://twitter.com/LandonSchropp">Landon Schropp</a>
View Compiled
html, body, h1
  height: 100%
  width: 100%

  transition: background-color 0.3s ease-in
  font-family: 'Open Sans', sans-serif
  background-color: hsl(350, 100%, 50%)
  // in firefox, a transformed element causes a scroll when it extends beyond the element's size, so we'll disable it
  overflow: hidden
  font-size: 12px
  @media (min-width: 480px)
    font-size: 14px
  @media (min-width: 640px)
    font-size: 16px
  font-family: 'Bangers', cursive
  height: 100%
  width: 100%
  position: relative
  top: -1rem
  animation: pop-out 2s ease-in-out infinite
  font-family: 'Bangers', cursive
  letter-spacing: 0.05em
  color: white
  padding: 0.5em

  font-size: 28px

  @media (min-width: 480px)
    font-size: 36px

  @media (min-width: 640px)
    font-size: 48px

  @media (min-width: 960px)
    font-size: 64px

  @media (min-width: 1280px)
    font-size: 84px
  position: fixed
  bottom: 0
  left: 0
  right: 0
  line-height: 2rem
  text-align: center
  color: transparentize(white, 0.25)
  background-color: transparentize(#222, 0.0)

@keyframes pop-out
    transform: scale3d(0, 0, 1)
    opacity: 1
    transform: scale3d(1, 1, 1)
    opacity: 1
    transform: scale3d(1.5, 1.5, 1)
    opacity: 0
a, a:visited
  color: inherit
View Compiled
$(document).ready(function () {
  // set the background to a random color
  var hue = 350;

  // cache the jquery elements to prevent dom queries during the animation events
  var $body = $("body");
  var $svg = $("svg");
  var $word = $(".word");

  // when the animation iterates
    "webkitAnimationIteration oanimationiteration msAnimationIteration animationiteration ",
    function () {
      // replace the header with a random word
      var word = words[Math.floor(Math.random() * words.length)] + "!";

      // update the background color
      hue += 47;
      $body.css("background-color", "hsl(" + hue + ", 100%, 50%)");

// the 10,000 most comment words, taken from https://goo.gl/hfjFkz
words = [

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js