Mengganti Animasi Loading Bawaan Template Subculture Fix

Pertama-tama saya menggunakan template subculture fix ini saya sempat bingung memodifikasi tampilannya. Yang saya modifikasi pada waktu itu, yaitu saya mau mengganti efek animasi loading bawaan templatenya. Saya search di google alhasil saya berhasil mengganti efek animasi loadingnya, sekarang saya akan berbagi trick cara mengganti animasi loading bawaan template subculture fix kepada Anda.

Simak langkah-langkah di bawah ini:

1. login ke akun blogger Anda.
2. Klik Template  Edit HTML
3. Tekan CTRL+F cari kode CSS seperti di bawah ini:

#redirect {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(44, 62, 80, 0.9);
    z-index: 9999;
    text-align: center;
    width: 100%;
    height: 100%;
    display: none;
}

#ballWrapper {
    width: 140px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 35%;
    margin-left: -70px;
    z-index: 100;
    transform: scale(1);
}

#ballWrapper:active {
    transform: scale(0);
}

#ball {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: rgb(187, 187, 187);
    box-shadow: 0 -5px 15px rgba(255, 255, 255, 0.4) inset, -2px -1px 40px rgba(0, 0, 0, 0.4) inset, 0 0 1px #000;
    position: absolute;
    top: 0;
    z-index: 11;
    animation: jump 1s infinite;
}

#ball::after {
    content: "";
    width: 80px;
    height: 40px;
    position: absolute;
    left: 30px;
    top: 10px;
    z-index: 10;
    border-radius: 40px / 20px;
}

#ballShadow {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 10;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, 0.1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, 0.1);
    border-radius: 30px / 40px;
    transform: scaleY(0.3);
    animation: shrink 1s infinite;
}

@keyframes jump {
    0% {
        top: 0;
        animation-timing-function: ease-in;
    }

    50% {
        top: 140px;
        height: 140px;
        animation-timing-function: ease-out;
    }

    55% {
        top: 160px;
        height: 120px;
        border-radius: 70px / 60px;
        animation-timing-function: ease-in;
    }

    65% {
        top: 120px;
        height: 140px;
        border-radius: 70px;
        animation-timing-function: ease-out;
    }

    95% {
        top: 0;
        animation-timing-function: ease-in;
    }

    100% {
        top: 0;
        animation-timing-function: ease-in;
    }
}

@keyframes shrink {
    0% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, 0.1);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, 0.1);
        border-radius: 30px / 40px;
        animation-timing-function: ease-in;
    }

    50% {
        bottom: 30px;
        margin-left: -10px;
        width: 20px;
        height: 5px;
        background: rgba(20, 20, 20, 0.3);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, 0.3);
        border-radius: 20px / 20px;
        animation-timing-function: ease-out;
    }

    100% {
        bottom: 0;
        margin-left: -30px;
        width: 60px;
        height: 75px;
        background: rgba(20, 20, 20, 0.1);
        box-shadow: 0 0 20px 35px rgba(20, 20, 20, 0.1);
        border-radius: 30px / 40px;
        animation-timing-function: ease-in;
    }
}

4. Kemudian hapus semua kode css tersebut dan lihat hasil-nya :)

Jika Anda juga mau mengganti efek loading langsung bisa Anda baca artikel saya Membuat Efek Loading Blog Ala Alvin Warasi. Selamat mencoba, semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250