October 2017 - Build your online business

Saturday, October 14, 2017

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