√ Tutorial Cara membuat header animasi di blogger

Tutorial Cara membuat header animasi di blogger - Banyak template blogger tidak memiliki desain header yang profesional dan kreatif. Pada artikel ini, kita akan mendesain header hero yang cantik dan beranimasi dengan beberapa animasi.

Terakhir kali, kami telah membagikan Cara mengatasi skema data-vocabulary.org untuk blogger. Kali ini kita akan share desain animasi header hero . 😊

Cara membuat header animasi di blogger

Cara membuat header animasi di blogger - Ruang Service

Mari kita mulai dengan mengambil cadangan penuh dari desain saat ini .

Dan inilah demo seperti apa header pahlawan kita. Akan ada efek animasi dan elemen akan bergerak maju dan mundur. Dan saya lupa memberi tahu, teksnya juga terus berubah. (Maaf, untuk versi statis )

Menambahkan Properti CSS Dari Hero Header

Cari ]]></b:skin> dan tempel kode di bawah ini tepat di atasnya. Anda dapat dengan mudah menyesuaikannya dengan mengubah properti CSS masing-masing.

/* 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
}

Menambahkan Efek Animasi ke Hero Header - Blogger

Animasi ini untuk elemen lingkaran yang terus bergerak, mengembang, dan mengecil. Tambahkan tepat di atas ]]></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)
    }
}

Menambahkan Bagian HTML di Tema Blogger

Di sinilah kita memanggil kelas dan tag header pahlawan kita. Tambahkan kode berikut ke lokasi yang diinginkan agar widget muncul.

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

Menambahkan JS untuk animasi teks

Anda mungkin telah memperhatikan bahwa teks terus berubah di header pahlawan kreatif kami. Anda dapat mengubah nilai teks dari sektor yang disorot di atas. Mari tambahkan file Javascript sederhana yang digunakan untuk menambahkan animasi teks. Saya telah mengambil kode JS dari codepen ini.

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

Itu saja. Anda telah berhasil menambahkan tajuk pahlawan , kreatif, cantik, beranimasi, dan ringan di template blog. Jangan ragu untuk menjelajahi dan meningkatkan desain untuk lebih banyak keunikan. Bantu orang lain membaca dengan membagikan artikel ini. Selamat Blogging!