Membuat banner iklan animasi html5 & css3

Membuat iklan dengan animasi biasanya menggunakan flash, agar iklan tampil di browser pengunjung tentu browsernya sudah terinstall flash player. Jadi jika flash player tidak terinstall di komputer pengunjung tentu iklan tidak muncul. Dengan demikian menggunakan flash sekarang tidak diminati karena hal tersebut, dan hasilnya file iklan terlalu besar atau berat.

Dengan menggunakan HTML5 & CSS3, anda dapat membuat animasi dengan mudah. Persiapan untuk membuat banner tidak perlu applikasi khusus, hanya menggunakan Notepad++ dan sudah mengerti bahasa html dan css.

Membuat banner iklan animasi html5 & css3

pisahkan kode html dengan css (style), atau bisa digabungkan dalam satu html, hasil tampilan bannernya seperti berikut:

CSS

#banner {
height: 250px;
width: 300px;
background: #454f78;
overflow: hidden;
}
#banner a {
height: 100%;
width: 100%;
display: block;
position: relative;
overflow: hidden;
animation: 1s fadein ease-in-out;
animation-fill-mode: forwards;
}
#rotary {
background: url(rotary.png) center center no-repeat;
background-size: 100% auto;
margin: 0 auto;
position: absolute;
width: 500px;
height: 500px;
margin-top: -100px;
margin-left: -100px;
animation: 20s roty infinite linear;
}
#produk {
margin: 0px auto 0 auto;
display: block;
z-index: 10;
width: 150px;
position: relative;
opacity: 0;
animation: 1s growin ease-in-out 1s;
animation-fill-mode: forwards;
}
#tombol {
color: #fff;
padding: 8px 15px 8px 15px;
font-family: 'Roboto Slab';
font-weight: 700;
font-size: 15px;
background: #3ba7d1;
display: inline-block;
margin: 10px 0 0 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
border-radius: 3px;
opacity: 0;
animation: 1s fadein ease-in-out 2s;
animation-fill-mode: forwards;
}
#diskon {
text-align: center;
position: absolute;
bottom: 20px;
width: 100%;
z-index: 10;
}
#diskon-text {
color: #fff;
font-family: 'Roboto Slab';
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: 1s fadein ease-in-out 1.5s;
animation-fill-mode: forwards;
}
#emblem {
box-sizing: border-box;
color: #fff;
padding: 10px 0 0 0;
font-weight: 800;
font-family: 'Roboto Slab';
font-size: 16px;
text-align: center;
width: 70px;
height: 70px;
background: #fea60f;
border: solid 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
display: inline-block;
border-radius: 50%;
transform: rotate(345deg);
animation: 1s fadein ease-in-out;
-webkit-transition-delay: 6s;
transition-delay: 6s;
position: absolute;
opacity: 0;
transform: rotate(0deg);
top: 0px;
right: 0px;
z-index: 10;
animation: 1s rollin ease-in-out 2.5s;
animation-fill-mode: forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes roty {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rollin {
0% {
opacity: 0;
transform: rotate(0deg);
top: 0px;
right: 0px;
}
100% {
opacity: 1;
transform: rotate(345deg);
top: 40px;
right: 40px;
}
}
@keyframes growin {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

Ukuran banner 300×250, Namun Anda dapat mengedit lagi CSS diatas sesuai keperluan dan mengubah warna backgroudnya.

HTML Banner

Kode ini dipasang di widget atau sidebar yang akan dimunculkan iklan.

<div id="banner">
 <a href="#">
 <div id="rotary"></div>
 <img id="produk" src="produk.png">
 <div id="emblem">SAVE 50%</div>
 <div id="diskon">
 <span id="diskon-text">Dapatkan produk terbaik</span><br/>
 <span id="tombol">Lihat Penawaran</span>
 </div>
 </a>
 </div>

Pada href=”#” ubah menjadi URL domainmu, contoh: href=”https://kedaihosting.com”. Sedangkan file gambar rotary.png(di css) produk.png(di html) dapat didownload dibawah ini:

[sociallocker id=3684]Download Banner[/sociallocker]

File lapiran download sudah ada html,css, dan gambar yang dibutuhkan (file demo dapat dicustom)