Kali ini Ngeblog bareng amran akan memberikan sedikit ilmu animation yaitu membuat animasi transisi hover dengan script html.
masih ada yang belum tau apa itu animasi transisi ?
saya beri tahu nih. Animasi adalah gambar yang bergerak dari kumpulan beberapa objek atau gambar yang tersusun secara beraturan sesuai alur gerak yang telah ditetapkan pada setiap waktu yang telah ditentukan. gambar atau objek yang dimaksud dapat berupa gambar manusia, hewan, benda, dan tulisan.
Transisi itu sendiri adalah peralihan atau perubahan dari suatu keadaan dan kondisi semula ke kondisi selanjutnya.
Baca Juga :
Oke, setelah membaca sedikit ulasan di atas maka kita akan lanjut ke permasalahan utamanya yaitu membuat transisi animasi hover. ada beberapa model transisi yang akan saya bahas satu per satu nantinya. bahan yang anda siapkan sebelum membuat animasi hover tersebut yaitu :
- software browser, seperti crome, mozila firefox, opera, dan apabila belum juga mempunyai pilihan yang tadi berarti boleh juga menggunakan browser bawaan windows yaitu windows explorer.
- software editting script, seperti notpad++, sublime text, CKEdit, coffe cap HTML editor, Dev-PHP IDE, komodo editor, dan aptama. biasanya seorang programmer lebih cenderung ke editor Notpad++ dan Sublime Text.
- Pastinya tambahan secangkir kopi dan music agar merefresh pikiran anda.
Setelah memenuhi persyaratan diatas, maka langkah selanjutnya adalah menyimak cara membuat transisi animasi hover dibawah ini :
1. Contoh animasi transisi berputar
AMRAN
Cara membuatnya :
Buka software editting script yang anda punya (contohnya notpad++). dan copy script dibawah ini :
<style>
.animasi{
width:100px;
height:100px;
background-color:red;
border:3px solid gray;
padding:10px;
transition:width 2s, height 2s,
transform 2s;
}
.animasi:hover{
width:100px;
height:100px;
transform:rotate(720deg);
}
</style>
<div class="animasi">AMRAN</div>
simpan dengan nama (contoh : rotasi berputar) dengan extensi .HTML. kemudian jalankan dengan browser (contoh : firefox, crome, dll).
2. Contoh animasi transisi bergerak ke kanan
Amran
Cara membuatnya :
copy script dibawah ini pada notpad++. simpan dengan nama (contoh : rotasi kanan) beri ekstensi .HTML.
<style>
.kanan{
width:100px;
height:100px;
background-color:red;
border:3px solid gray;
padding:10px;
transition: width 2s, height 2s;
transition: width 2s, height 2s, transform 2s;
}
.kanan:hover{
width: 100px;
height: 100px;
transform: translate(200px, 0px);
}
</style>
<div class="kanan">Amran</div>
Jalankan dengan browser anda.
3. Contoh animasi transisi bergerak ke bawah
Amran
Cara membuatnya :
copy script dibawah, kemudian simpan dengan nama (sebagai contoh : rotasi bawah) dengan extensi .HTML.
<style>
.bawah{
width:100px;
height:100px;
background-color:red;
border:3px solid gray;
padding:10px;
transition: width 2s, height 2s;
transition: width 2s, height 2s, transform 2s;
}
.bawah:hover{
width: 100px;
height: 100px;
transform: translate(0px, 100px);
}
</style>
<div class="bawah">Amran</div>
lihat hasilnya dengan browser anda.
4. Contoh animasi transisi melebar ke samping.
Cara membuatnya :
copy scriptnya, paste di notpad++ kemudian simpan dengan nama (contoh : rotasi lebar) dengan extensi .HTML.
<style>
.lebar{
width:100px;
height:100px;
background-color:red;
border:3px solid gray;
padding:10px;
transition:width 2s;
}
.lebar:hover{
width: 300px;
}
</style>
<div class="lebar">AMRAN TALIBAS</div>
silahkan jalankan dengan browser anda.
silahkan dicoba. apabila anda memasukkan dengan benar, maka tidak ada masalah. jika ada masalah pada script yang saya bagikan, silahkan berkomentar di bawah artikel ini. silahkan anda edit sesuai keinginan, yang pastinya jangan sampai error. saya tidak bertanggung jawab apabila ada kesalahan pengedittan. masalah di tanggung masing - masing. hehehe....
Silahkan menjadi followers Ngeblog bareng amran dengan cara klik tombol ikuti disamping tampilan blog ini agar artikel terbaru blog ini dapat masuk secara otomatis ke akun email anda. oke...
Terima kasih atas kunjungannya, semoga bermanfaat. salam hangat ngeblog bareng amran...
Tidak ada komentar:
Posting Komentar