TwistBlogg
  • Home
  • Blog
  • About
  • Contact
Follow on TwitterFollow on FacebookFollow on LinkedinFollow on Github
TwistBlogg
TwistBlogg

How to create beautiful and animated hero header in blogger

Many blogger templates lack professional and creative header designs. In this article, we are going to design a beautiful and animated hero header with some animations.

Invictus
- 1 min read

Last time, we had shared creative hero footer design for blogger. This time, we are going to share animated hero header design. 😊

Let's start by taking a 💾 full backup of current design.

And here's the demo of what our hero header looks like. There'll be animation effects and elements will move forward and backward. And I forget to tell, the text keep changing as well. (Sorry, for the static version 😞)

Important note: You can share this code in your blog only if you provide a backlink to this article.

Adding CSS Properties Of Hero Header

Search for ]]></b:skin> and paste below code directly above it. You can easily customize it by changing respective CSS properties accordingly.

/* Hero Header Design By TwistBlogg.Com*/
.top-banner-section {
padding-bottom: 60px;
margin-bottom: -50px;
margin-top: -15px;
background: transparent!important
}
.bubble li {
background: #799fe7;
opacity: .1;
width: 16px;
height: 16px;
border-radius: 50%;
position: absolute;
list-style: none
}
.bubble li:nth-child(1) {
left: 220px;
top: 250px;
-webkit-animation: spin3 2s infinite alternate;
animation: spin3 2s infinite alternate
}
.bubble li:nth-child(2) {
left: 35%;
top: 100px;
-webkit-animation: spin 2s infinite alternate;
animation: spin 2s infinite alternate
}
.bubble li:nth-child(3) {
left: 40%;
width: 51px;
height: 51px;
top: 300px;
-webkit-animation: spin1 3s infinite alternate;
animation: spin1 3s infinite alternate
}
.bubble li:nth-child(4) {
left: 42%;
top: 280px;
width: 20px;
height: 20px
}
.bubble li:nth-child(5) {
left: 76%;
width: 51px;
height: 51px;
top: 160px;
-webkit-animation: spin1 3s infinite alternate;
animation: spin1 3s infinite alternate
}
.bubble li:nth-child(6) {
left: 75%;
width: 30px;
height: 30px;
top: 186px
}
.bubble li:nth-child(7),
.bubble li:nth-child(8) {
left: 62%;
top: 100px;
width: 20px;
height: 20px;
-webkit-animation: spin2 2s infinite alternate;
animation: spin2 2s infinite alternate
}
.bubble li:nth-child(8) {
left: 90%;
top: 250px
}
.banner_text {
background: transparent;
padding: 0 22px 0;
text-align: center;
margin-top: -100px;
padding-bottom: 50px
}
.banner_text h5 {
font-family: inherit;
font-size: 40px;
color: #09204C;
line-height: 50px;
font-weight: 400
}
.banner_text p {
color: #4d4d4d;
font-size: 18px;
line-height: 28px;
font-family: inherit;
margin-bottom: 80px
}
.outer-circle {
width: 300px;
height: 300px;
background: #F2EEFE;
border-radius: 0 300px 300px 300px;
-moz-border-radius: 0 300px 300px 300px;
-webkit-border-radius: 0 300px 300px 300px
}
.inner-circle {
width: 250px;
height: 250px;
background: #e0e8ff;
border-radius: 0 0 250px 0;
-moz-border-radius: 0 0 250px 0;
-webkit-border-radius: 0 0 250px 0
}

Adding Animation Effects to Hero Header - Blogger

This animation is for circle elements that keeps moving, expand and shrink. Add it just above ]]></b:skin>.

@-webkit-keyframes spin {
0% {
-webkit-transform: translateX(-10px) scale(.9);
transform: translateX(-10px) scale(.9)
}
to {
-webkit-transform: translateX(30px) scale(1.3) translateY(10px);
transform: translateX(30px) scale(1.3) translateY(10px)
}
}
@keyframes spin {
0% {
-webkit-transform: translateX(-10px) scale(.9);
transform: translateX(-10px) scale(.9)
}
to {
-webkit-transform: translateX(30px) scale(1.3) translateY(10px);
transform: translateX(30px) scale(1.3) translateY(10px)
}
}
@-webkit-keyframes spin1 {
0% {
-webkit-transform: scale(.9);
transform: scale(.9)
}
to {
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
}
@keyframes spin1 {
0% {
-webkit-transform: scale(.9);
transform: scale(.9)
}
to {
-webkit-transform: scale(1.5);
transform: scale(1.5)
}
}
@-webkit-keyframes spin2 {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(40px);
transform: translateY(40px)
}
}
@keyframes spin2 {
0% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
to {
-webkit-transform: translateY(40px);
transform: translateY(40px)
}
}
@-webkit-keyframes spin3 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
25% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px)
}
to {
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
}
@keyframes spin3 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
25% {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px)
}
to {
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
}

Adding HTML Section in Blogger Theme

This is where we call our hero header classes and tags. Add the following code to desired location for widget to appear.

<section class='top-banner-section'>
<ul class='bubble'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class='outer-circle'>
<div class='inner-circle'></div>
</div>
<div class='banner_text'>
<h5>We Share <span class='txt-rotate' data-period='2000' data-rotate='[ "Plugins.", "Themes.", "SEO Hacks.", "Blogging Guides.", "Tips & Tricks!" ]'></span></h5>
<p>- Welcome To TwistBlogg.com -</p>
</div>
</section>

Adding JS for text animation

You might have noticed the text keeps changing in our creative hero header. You can change the text-value from above highlighted sector. Let's add our simple Javascript file used for adding text animation. I've taken the JS code from this codepen.

< script type = 'text/javascript' > /*<![CDATA[*/
var TxtRotate = function (t, e, i) {
this.toRotate = e, this.el = t, this.loopNum = 0, this.period = parseInt(i, 10) || 2e3, this.txt = "", this.tick(), this.isDeleting = !1
};
TxtRotate.prototype.tick = function () {
var t = this.loopNum % this.toRotate.length,
e = this.toRotate[t];
this.isDeleting ? this.txt = e.substring(0, this.txt.length - 1) : this.txt = e.substring(0, this.txt.length + 1), this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";
var i = this,
s = 300 - 100 * Math.random();
this.isDeleting && (s /= 2), this.isDeleting || this.txt !== e ? this.isDeleting && "" === this.txt && (this.isDeleting = !1, this.loopNum++, s = 500) : (s = this.period, this.isDeleting = !0), setTimeout(function () {
i.tick()
}, s)
}, window.onload = function () {
for (var t = document.getElementsByClassName("txt-rotate"), e = 0; e < t.length; e++) {
var i = t[e].getAttribute("data-rotate"),
s = t[e].getAttribute("data-period");
i && new TxtRotate(t[e], JSON.parse(i), s)
}
var o = document.createElement("style");
o.type = "text/css", o.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }", document.body.appendChild(o)
};
/*]]>*/
< /script>

That's all. You've successfully added a 🔥, creative, beautiful, animated and light weight hero header in blog template. Feel free to explore and upgrade the design for more uniqueness. Help others read out by sharing this article. Happy Blogging !

Sign up for The Best Bits

Get all of our posts, straight to your email. Opt-out any time.

Not into email list things, but still want to read more?

Follow us on Twitter

© 2019 - 2020 TwistBlogg / All Rights Reserved.

Follow on TwitterFollow on TelegramFollow on FacebookFollow on GithubFollow on PinterestFollow on LinkedinFollow on MixFollow on Instagram