Stay hungry. Stay foolish.
HTML
<div class="wrapper">
<h1>Stay <span id="typed" class="typed"></span></h1>
</div>
CSS
html {
margin: 0;
background: #000;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
font-family: 'Lato', sans-serif;
}
.wrapper {
opacity: 0;
width: 100%;
height: 100%;
background: url('http://goo.gl/mb7WKi') no-repeat center center fixed;
background-size: cover;
}
h1 {
color: #ffffff;
font-size: 4em;
font-style: italic;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.typed-cursor{
opacity: 1;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
JAVASCRIPT
$(document).ready(function(){
$(".wrapper").animate({ opacity: 1 }, { duration: 3000 });
$("#typed").typed({
strings: ["hungry.","foolish."],
startDelay: 2900,
typeSpeed: 300,
backDelay: 4000,
loop: true,
callback: function(){}
});
});
