starwars.html

<style>

  /* 
  ** ALL CREDIT GOES TO 
  ** Craig Buckler
  ** http://www.sitepoint.com/css3-starwars-scrolling-text/
  **
  ** Blame me for the music via embedded video bit
  */

  

  * { padding: 0; margin: 0; }

  body, html
  {
    width: 100%;
    height: 100%;
    font-family: "Droid Sans", arial, verdana, sans-serif;
    font-weight: 700;
    color: #ff6;
    background-color: #000;
    overflow: hidden;
  }

  body {
    background: url(./stars1.jpg);
    background-repeat: repeat;
    background-size: 500px;    
  }

  p#start
  {
    position: relative;
    width: 16em;
    font-size: 200%;
    font-weight: 400;
    margin: 20% auto;
    color: #4ee;
    opacity: 0;
    z-index: 1;
    -webkit-animation: intro 5s ease-out;
    -moz-animation: intro 5s ease-out;
    -ms-animation: intro 5s ease-out;
    -o-animation: intro 5s ease-out;
    animation: intro 5s ease-out;
  }

  @-webkit-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }

  @-moz-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }

  @-ms-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }

  @-o-keyframes intro {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
  }

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

  h1
  {
    position: absolute;
    width: 3.6em;
    left: 50%;
    top: 5%;
    font-size: 25em;
    text-align: center;
    margin-left: -1.8em;
    line-height: 0.8em;
    letter-spacing: -0.05em;
    color: #000;
    text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
    opacity: 0;
    z-index: 1;
    transform-origin: top center;
    -webkit-animation: logo 8s ease-out 5s;
    -moz-animation: logo 8s ease-out 5s;
    -ms-animation: logo 8s ease-out 5s;
    -o-animation: logo 8s ease-out 5s;
    animation: logo 8s ease-out 5s;
  }

  h1 sub
  {
    display: block;
    font-size: 0.6em;
    letter-spacing: 0;
    line-height: 0.8em;
    margin-top: 0.8em;
  }

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

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

  @-ms-keyframes logo {
    0% { -ms-transform: scale(1.3); opacity: 1; }
    50% { opacity: 1; }
    100% { -ms-transform: scale(0.2); opacity: 0; }
  }

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

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

  /* the interesting 3D scrolling stuff */
  #titles
  {
    position: absolute;
    width: 18em;
    height: 115em;
    bottom: 0;
    left: 50%;
    margin-left: -9em;
    font-size: 350%;
    text-align: justify;
    overflow: hidden;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: perspective(300px) rotateX(15deg);
    -moz-transform: perspective(300px) rotateX(15deg);
    -ms-transform: perspective(300px) rotateX(15deg);
    -o-transform: perspective(300px) rotateX(15deg);
    transform: perspective(300px) rotateX(15deg);
  }

  #titles:after
  {
    position: absolute;
    content: ' ';
    left: 0;
    right: 0;
    top: 0;
    bottom: 60%;
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
    pointer-events: none;
  }

  #titles p
  {
    text-align: justify;
    margin: 0.8em 0;
  }

  #titles p.center
  {
    text-align: center;
  }

  #titles a
  {
    color: #ff6;
    text-decoration: underline;
  }

  #titlecontent
  {
    position: absolute;
    top: 100%;
    width: 100%;
    -webkit-animation: scroll 250s linear 8s infinite;
    -moz-animation: scroll 250s linear 8s infinite;
    -ms-animation: scroll 250s linear 8s infinite;
    -o-animation: scroll 250s linear 8s infinite;
    animation: scroll 250s linear 8s infinite;
  }

  /* animation */
  @-webkit-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
  }

  @-moz-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
  }

  @-ms-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
  }

  @-o-keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
  }

  @keyframes scroll {
    0% { top: 100%; }
    100% { top: -170%; }
  }

  .crossout {
    text-decoration: line-through;
  }

</style>
<style>
  .octicon {
    display: inline-block;
    fill: white; 
  }

  .githubstarwars {
    font-size: 1.8em;
    color: orange;
  }

</style>

<audio id="audio" loop>
  <source src="./starwars.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<script>
  setTimeout(() => document.getElementById('audio').play(), 4400);
</script>

<p id="start">A long time ago, in a googlaxy far far away&hellip;</p>

<h1>Angular<sub>The Fourth Awakens</sub></h1>

<div id="titles">
  <div id="titlecontent">

    <p>The web was a dangerous place for developers to visit</p>
    <p>DOM coupling was inevitable, watchers watching you from every corner, and no conventions whatsoever.</p>
    <br><br>
    <p>
      Then a small team of brave coders (that get paid a ton by Google) started a movement to destroy the evil forces that withheld developers from being productive and happy.
    </p>
    <br><br>
    <p>
      The (core) team decided to build a platform so great and wonderful, that all other frameworks will bow down and surrender to the mighty emperor of the web.
    <br><br><br><br><br>
    <p>
      But that was too hard so they built Angular.
    </p>
    <br><br><br>
    <p>
    Nonetheless, web developers from the entire galaxy started using Angular, and it has become extremely popular, and was able to defeat evil competitors like Backbone and Ember.
    </p>
    <br><br>
    <p>After a long period of peace in the kingdom, a new contender have arose, and is threathing the throne.
    </p>
    <p>This is of course.....</p>
    <br>
    <p>Umm... what's that name....</p>
    <p>Come on, how's it called, you know that framework....</p>
    <p>Pfff, I mean, not even a framework more like a small library</p>
    <br>
    <p>You know the one with no 2 way data binding, no form infrastructure, no styleguide, no router, no type safety, no CLI, no dependency injection.....</p>
    <br><br><br><br>
    <p>Oh yeah - VueJS.</p>
    <br>
    <p>Anyway....</p>
    <br>
    <p>The core team knew they had to win the community's appreciation in order to win the most important war of them all:
    <br><br><br>
    <p class="githubstarwars center">
      The <img height="90" src="star.png"/> wars!!!!
    </p>
    <br><br><br>
    <p>So they are now busy with making Angular better and faster, improving the documentation, and supporting the eco system and the community.
    </p>
    <br><br>
    <p>
      Very busy....
    </p>
    <img width="60%" style="margin-left: 20%" src="misko.jpg"/>
    <br><br>
    
    <p>
      (That's Misko, father of Angular in case you didn't know)  
    </p>
    <br><br>
    <p>
      Some of the most powerful Jedi warriors of the galaxy have arrived to our planet, and are here to teach you all the power of "The Fourth", and spread knowledge and best practices.
    </p>
    <br><br><br><br>
    <p>
      Enjoy AngularUP 2017!!!
    </p>
    <p>
      Here are some cat pictures:
    </p>
    <img width="60%" style="margin-left: 20%" src="cat3.jpeg"/>
    <img width="60%" style="margin-left: 20%" src="cat5.gif"/>
    <img width="60%" style="margin-left: 20%" src="cat4.jpg"/>
    <br><br>
    <p class="center">The End</p>
    <br><br><br>
    <p>
    Fork this presentation here:</p>
    <a href="https://github.com/500tech/angularupintro">github.com/500tech/angularupintro</a>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
  </div>
</div>