Cara Membuat Notifikasi Show Hide Animasi Menggunakan Keyframe

Posted by Admin Ganteng on
Kang Gira - Semakin hari para master blogger membuat inovasi baru untuk mempercantik tampilan blogger nya. Tutorial yang dulu mungkin sudah kita lupakan, dan kita akan dialihkan dengan tutorial yang lebih baik lagi dengan tampilan yang lebih minimalis.

Material desain adalah hasil dari pengembangan google saat ini, dan hasilnya kiga bisa merasakan dari tampilan yang memanjakan mata itu.

Seperti pada judulnya "Cara Membuat Notifikasi Show Hide Dengan Menggunakan Keyframe" saya akan memberikan tutorial cara membuat notifikasi tersebut. Tampilannya akan menarik perhatian kamu pula.

Notifikasi Animasi ini di tempatkan di di kiri tengah layar, kamu bisa menyesuaikannya dengan yang kamu suka. Dan animasi nya pun lebih lembut dan elegan karena menggunakan keyframe animation.

Kamu bisa melihat demonya dibawah ini ya.


Berminat untuk memasangnya? Ikuti langkah-langkahnya untuk kamu pasang di blog kamu.

1. Pastikan template kamu sudah terdapat JQuery dan CSS Material Icons nya. Jika belum letakan CSS Material Icon dibawah ini tepat diatas </head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
2. Setelah itu masukkan Kode CSS dibawah ini tepat di atas ]]></b:skin> atau </style>
/* Notif Box Animation Keyframe */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}
3. Setelah itu letakan HTML notifikasinya tepat dibawah kode <body> atau diatas </body>
<div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a>
<div class='notifbox'>
Blogger semakin lama semakin berkembang, jadi kita harus bisa menyesuaikan perubahan dan menggunakan kreatifitas untuk menyempurnakannya.
</div>
</div>
4. Terakhir letakan juga kode javascript berikut tepat diatas </body>
<script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script>
5. Simpan template lalu lihat hasilnya.

Mungkin hanya segini tutorial Membuat Notifikasi Show Hide Animasi Menggunakan Keyframe yang saya kasih, jika ada yang ingin ditanyakan, silahkan berkomentar.

Comments

Post a Comment