Search Suggest

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 wit
How to create beautiful and animated hero header in blogger

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 😞) 

demo of hero header for blogger with animation effects

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> // highlight-line
		<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) // highlight-line
};
/*]]>*/
< /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 !
4.94 / 169 rates

Loved what you read?

Sign up for The Best Bits. Opt-out any time.
We do not spam!

Not into email list things, but still want to read more?
Follow us on Twitter

3 comments

  1. Its good .. thanks
  2. Amazing 😍
  3. Thanks a lot.