Hello braders! sebelumnya gw mau mengucapkan selamat menunaikan ibadah puasa bagi yang menjalankan 🙂 semoga lancar sampai akhir bulan ramadhan nanti yaa..
Okay, posting kali ini gw mau share tentang sesuatu yang berhubungan dengan CSS, lebih ke arah animasi dan transisi. Tadi pagi gw baca di timeline twitter gw ada yg share link tentang poin ini, di-click dan ternyata direct ke envatomarket(codecanyon.net). Agak di-scroll ke bawah, dan ternyata gw menemukan sesuatu yang keren abis buat di-implementasikan di website buatan sendiri. What’s that?
Image Hover Animation
Yap, itu page isinya sekumpulan gambar yang kalo kita hover maka akan terlihat animasi transisi pada overlay image itu sendiri. Effect2-nya juga keren2, ada yang slide-to-left, slide-to-right, slide-to-top, slide-to-bottom, ada yang rotate button, ada yang flip horizontal, flip vertical, pokoknya macem-macem deh. Dan lebih asiknya apa? itu cuma pake CSS3, pure CSS3 broo.. mantapp.
Padahal kalo lu browsing di-goggle, coba deh type keyword ‘jquery plugin image hover’ maka result-nya hampir 416.000 web page! Yap, sebelum CSS3 sangat populer dengan animasinya seperti sekarang, sebagai front-end developer mereka lebih banyak mengakali teknik image hover transition tersebut dengan jQuery. Banyak bgt plugin-pluginnya bro, bahkan ada satu web yang membahas tentang macam-macam jQuery plugin image hover ini yang bisa kita jadiin referensi, nih di sini -> http://www.jqueryrain.com/demo/jquery-image-hover-effect/. Ada 100 bro!
It’s time to migrate to the CSS3!
Yah, maybe ini cuma pandangan sebagian orang aja (termasuk gw). Memang sih mau pakai CSS atau JS ga masalah, dan masing-masing antara CSS dan JS memiliki kelebihan dan kekurangan masing-masing. Example nih ya, CSS itu lebih ringan dan elegan jika dibandingkan dengan JS, pemakaian JS bisa saja terjadi conflict dengan script yang lain, selain itu mayoritas file pluginnya cukup besar, jadi akan membuat website yang dibuat jadi berat untuk di-load, alhasil visitor pada kabur deh. Tapi negatifnya CSS adalah, tidak semua browser support akan property-property tertentu, yah ini akan sangat merepotkan dimana animasi yang dihasilkan tidak sesuai dengan ekspektasi. Sekarang JS, kelebihannya adalah hampir di semua browser support, jadi pikiran bisa kebih tenang hehe.
Tapi nih ya, menurut kacamata gw sih (padahal ga make kacamata) semua browser pasti akan melakukan update untuk penyesuaian teknologi masa kini. Secara sekarang udah zamannya CS3 dan HTML5, masa sih lo ga apdet browser…… ckck
Dengan begitu satu kelemahan CSS (yaitu browser support) akan tertutupi dan pikiran bisa tenang (lagi). So why you still mandek dengan memanfaatkan plugin-plugin jQuery image hover? It’s time to migrate to the CSS3 brooo!!!
Ikeh, eh okeh maksudnya, langsung aja nih gw share link-nya. Emang berbayar sih, tapi masih bisa kita ‘raba’ ko, di-inspect element aja!