There are many Landing pages already using such trend on the Header - Animated Text
So... lets start
1st we have to create a header, where will be animated text
<header class="site-header__wrapper"> <div class="site-header"> <h1 class="site-header__title">Landing Page Design</h1> <span id="typed-text"></span> </div></header>
In typed text we will place our animated text
Let's add some nice style
body{ font: 16px 'Roboto','Comforta', sans-serif;}.site-header__wrapper { background: #232f3b; height: 100vh; display: flex; align-items: center; padding: 15px; justify-content: center;}.site-header{ width: 100%; max-width: 600px; min-height: 200px; text-align: center; color: #eee;}.site-header__title { font-size: 2rem;}.site-header__description { font-size: 1.125rem;}
Now we have to add JS to the website
<script src="./js/typed.min.js"></script>
After you connected plugin, we have to activate
<script>
var typed2 = new Typed('#typed-text', {
strings: ['Landing Page Creation', 'Domain and Hosting for free', 'SEO for your website'],
typeSpeed: 30,
backSpeed: 20,
loop: true
});
</script>
and here some interesting animations for your website
- codepen.io/yoannhel/pen/sJpDj
- codepen.io/siamon123/pen/xGWQXJ
- codepen.io/ajayadav09/pen/KwjOBP"
- codepen.io/amauryfelix/pen/xOKeGL
- codepen.io/slandar/pen/mWQPoe
- codepen.io/egrucza/pen/LkdPZP
- codepen.io/ameyraut/pen/rimju
