Splash Screen

index.html

<div class="container">
<div class="scroller">
<div class="inner">
<span>I'm Adam Blum.</span>
<span>I play a lot of instruments.</span>
<span>I record them in my home studio.</span>
<span>But my real goal is to <a class="blue">make</a> <a class="blueb">music</a>.</span>
</div>
</div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

splash-screen.markdown

Splash Screen

Possible splash screen intro to a website. Would need to add an animation to hide the .container div after 10s. Inspired by This

A Pen by Adam Blum on CodePen.

License.

style.less

* {
   margin: 0px;
   padding: 0px;
   font-weight: 200;
   font-family: helvetica neue, helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a{color: #000; text-decoration: none;}
a:hover{color: #000; text-decoration: none;}

body {
   background: #fafafa;
}  

.container {
   width: 100%;
   height: 50px;
   position: fixed;
   top: 50%;
   left: 50%;
   margin-left: -25%;
   margin-top: -25px;
}

p {
   float: left; 
   line-height: 50px;
   font-size: 200%;
   color: #888;
}

.scroller {
   height: 50px;
   line-height: 50px;
   float: left;
   margin-left: 5px;
   overflow: hidden;
}

.scroller span {
   display: block; 
   font-size: 200%;
   color: #000;
}

.scroller .inner {
   -webkit-animation: scroll 10s 1 ease-out;
   -moz-animation: scroll 10s 1 ease-out;
   animation: scroll 10s 1 ease-out;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}


.blue {
   -webkit-animation: color 0.25s 1 linear;
   -moz-animation: color 0.25s 1 linear;
   animation: color 0.25s 1 linear;
   
      -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   animation-delay: 8s;
   
      -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   
}


.blueb {
   -webkit-animation: color 0.25s 1 linear;
   -moz-animation: color 0.25s 1 linear;
   animation: color 0.25s 1 linear;
   
         -webkit-animation-delay: 8.25s;
   -moz-animation-delay: 8.25s;
   animation-delay: 8.25s;
   
      -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}


@-webkit-keyframes color {
   0%  {color: #000;}
   100% {color: #2c90c6;}
}

@-moz-keyframes color {
   0%  {color: #000;}
   100% {color: #2c90c6;}
}

@keyframes color {
   0%  {color: #000;}
   100% {color: #2c90c6;}
}












@-webkit-keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -50px;}
   44%  {margin-top: -50px;}
   55%  {margin-top: -100px;}
   66%  {margin-top: -100px;}
   77%  {margin-top: -150px;}
   88%  {margin-top: -150px;}
   100% {margin-top: -150px;}
}

@-moz-keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -50px;}
   44%  {margin-top: -50px;}
   55%  {margin-top: -100px;}
   66%  {margin-top: -100px;}
   77%  {margin-top: -150px;}
   88%  {margin-top: -150px;}
   100% {margin-top: -150px;}
}

@keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -50px;}
   44%  {margin-top: -50px;}
   55%  {margin-top: -100px;}
   66%  {margin-top: -100px;}
   77%  {margin-top: -150px;}
   88%  {margin-top: -150px;}
   100% {margin-top: -150px;}
}