Hai Sobat, kali ini saya akan share " Cara Membuat Efek Loading Page Bounce Animation ". efek ini berguna bagi anda yang bosan dengan efek loading lama anda...
Mau tau caranya...... Langsung Saja Ke Tutorialnya...
Cara Membuat Efe Loading Page Bounce Animation
1. Masuk Ke Beranda Blogger > Template > Edit HTML2. Cari Kode </head> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script>
<style>
#load-page-seocips { background-color:#00CCFF; width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; }
.dots-container { padding:0; position:absolute; text-align:center; top:50%; width:100%; }
.dots { -webkit-animation:bounce 1.5s infinite linear; animation:bounce 1.5s infinite linear; background:#FFF; border-radius:50%; display:inline-block; height:20px; text-align:center; width:20px; }
.dots:nth-child(1) { -webkit-animation-delay:.2s; animation-delay:.2s; }
.dots:nth-child(2) { -webkit-animation-delay:.4s; animation-delay:.4s; }
.dots:nth-child(3) { -webkit-animation-delay:.6s; animation-delay:.6s; }
.dots:nth-child(4) { -webkit-animation-delay:.8s; animation-delay:.8s; }
.dots:nth-child(5) { -webkit-animation-delay:1s; animation-delay:1s; }
@-webkit-keyframes bounce {
0% { -webkit-transform:translateY(0); } 15% { -webkit-transform:translateY(-15px); } 30% { -webkit-transform:translateY(0); }
}
@keyframes bounce {
0% { transform:translateY(0); } 15% { transform:translateY(-15px); } 30% { transform:translateY(0); }
}
</style>4. Cari Kode <body>
5. Letakkan Kode Di Bawah Ini Dibawah Kode <body>
<div id="load-page-seocips">
<div class="dots-container">
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
</div>
</div>
0 Komentar untuk "Cara Membuat Efek Loading Page Bounce Animation"
Maaf Jika Komentar Anda Jarang Saya Balas, Karena Sibuk Di Dunia Maya