Create animated header on your Landing Page

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




VIA