<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

<div id="starwars" class="animate">
  <p class="intro">
    A long time ago, in a galaxy far, far away... 
  </p>
  <img src="http://vignette1.wikia.nocookie.net/disney/images/8/8b/Starwars-logo.png" class="logo" />
  <div id="reel">
    <div class="content">
      <h1>Episode IV</h1>
      <h2>A NEW HOPE</h2>
      <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>

      <p>During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.</p>

      <p>Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy....</p>
    </div>
  </div>
  
  <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/MainTitle.ogg" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 4500)">
  </audio>
  
  <button>Restart</button>
</div>
html {
  height: 100%;
}
body {
  background: url(https://i.ytimg.com/vi/JquobII5VjA/maxresdefault.jpg);
  background-size: cover;
  position: relative;
  height: 100%;
  font-family: 'Open Sans', sans serif;
}

#starwars {
  position: relative;
  height: 100%;
  width: 100%;
}

.animate {
  .intro {
    font-size: 250%;
    color: #19A3C8;
    width: 578px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: intro 5s linear 0s;
    opacity: 0;
  }

  .logo {
    position: absolute;
    width: 0;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: logo  10s linear 5s;
    opacity: 0;
  }

  #reel {
    $width: 580px;
    width: $width;
    margin-left: -($width/ 2);

    position: absolute;
    bottom: 0;
    left: 50%;
    height: 100em;
    overflow: hidden;

    transform: perspective(255px) rotateX(30deg);
    transform-origin: 50% 100%;

    color: #FFEC01;
    font-weight: bold;
    font-size: 250%;
    text-align: justify;

    div {
      position: absolute;
      top: 100%;
      animation: reel 53s linear 12s;

      p {
        line-height: 1.5em;
        margin-top: 50px;

        &:first-child {
          margin-top: 0;
        }
      }

      h1, h2 {
        text-align: center;
        margin-bottom: 25px;
      }
    }
  }
  
  button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    background: none;
    border: 0;
    font-weight: bold;
    color: #FFEC01;
    opacity: 1;
    cursor: pointer;
    animation: reset  66s linear;
  }
}

@keyframes reel {
	0% { 
    top: 100%; 
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
	100% { 
    top: 50%; 
    opacity: 0;
  }
}

@keyframes intro {
	0% { 
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
	80% { 
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes logo {
	0% { 
    width: 300px;
    opacity: 1;
  }
  10% {
    width: 300px;
    opacity: 1;
  }
  15% {
    width: 300px;
  }
	90% {
    width: 10px;
    opacity: 1;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

@keyframes reset {
  0% {
    opacity: 0;
    cursor: default;
  }
  99% {
    opacity: 0;
    cursor: default;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
$(function() {
  $('button').on('click', function() {
    var elm = document.getElementById('starwars');
    var newone = elm.cloneNode(true);
    elm.parentNode.replaceChild(newone, elm);
  });
}());

External CSS

  1. https://meyerweb.com/eric/tools/css/reset/reset.css

External JavaScript

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