Life Advice :)
HTML
<h1>BE <span id="typed" class="typed"></span></h1>
CSS
html {
height: 100%;
}
body {
background: #2980b9 url('https://goo.gl/0AjPm8') repeat 0 0;
animation: 10s linear 0s normal none infinite animate;
font-family: 'Oswald', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
}
h1 {
color: #ffffff;
font-size: 8vw;
letter-spacing: 6px;
}
.typed {
border-bottom: 2px solid #ffffff;
}
.typed-cursor {
opacity: 1;
animation: blink 0.7s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes animate {
from {background-position:0 0;}
to {background-position: 500px 0;}
}
JAVASCRIPT
$(function() {
$("#typed").typed({
strings: ["HAPPY","BRIGHT","YOU"],
typeSpeed: 200,
backDelay: 1500,
loop: true
});
});
1 Response