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> // 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)
};
/*]]>*/
</script>