16 March 2022

Efek Fade In CSS Tangan Mengepal

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Efek Fade In CSS Tangan Mengepal

Trik CSS bisa beraneka ragam. Mulai dari border radius/sudut lengkung, box shadow/bayangan, rotation/berputar, transformskew/kemiringan. Tapi ada juga trik yang unik.

Diantara kode yang akan diberikan dibawah ini adalah bentuk tangan mengepal dan seperti menghantam. Tapi sebetulnya tidak juga, hanya efek animasi yang bekerja disini. So nanti lihat saja ya.

Baca Juga : Menampilkan Widget Hantu Melayang di Halaman Blog

Kode-kode seperti ini menjadi aksesoris blog. Sehingga kesan yang ditampilkan adalah blog yang semakin unik. Karena dengan animasi yang ditampilkan ini. Tapi menurut sebagian orang, bisa menjadikan kurang fokus pada artikel.

Jadi pilihan ada pada kalian semua mau memasang atau tidak karena kami disini hanya memberikan CSSnya sedangkan pilihan tetap berada di tangan kalian. Kalau lanjut baca silakan.

Baca Juga : Kehebatan Teknik Mata Ikan Menyembul dengan CSS3

Efek Fade In CSS Tangan Mengepal


Caranya : Masuk ke Dashboard Blogger, pilih Tata Letak, pilih Tambah HTML/Javascript. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu.

<script>
if(typeof jQuery=='undefined'){document.write('<'+'script');document.write('language="javascript"');document.write(' type="text/javascript"');document.write('src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}
</script>
<script>
if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}
image_urls['lips1']={"url":"http://4.bp.blogspot.com/-C_ooFL7iXuc/TjZRc-5s7gI/AAAAAAAAAcU/2nqTHsWgXYo/s400/lips1.png","width":"60","height":"68"};
image_urls['lips2']={"url":"http://4.bp.blogspot.com/-EijC4KcaS5c/TjZRjItTp4I/AAAAAAAAAcc/Uv32O9KEmNQ/s400/lips2.png","width":"60","height":"68"};
image_urls['lips3']={"url":"http://2.bp.blogspot.com/-q0pOULk8RVI/TjZRqnjDFRI/AAAAAAAAAck/ZA3ApmxPEcQ/s400/lips3.png","width":"60","height":"68"};
image_urls['lips4']={"url":"http://4.bp.blogspot.com/-h_drHQCruuc/TjZRuOKH1ZI/AAAAAAAAAcs/510FbZcGz8g/s400/lips4.png","width":"60","height":"68"};
image_urls['lips5']={"url":"http://2.bp.blogspot.com/-8RFPh1m_fI4/TjZRx6By02I/AAAAAAAAAc0/nrStL6SR_SY/s400/lips5.png","width":"60","height":"68"};
$(document).ready(function(){var e=$(window).width();var f=$(window).height();var g=function(a,b){var c=(parseFloat(b)-parseFloat(a))+1;var d=Math.floor(Math.random()*c)+parseFloat(a);
return d};
for(var i=1;i<=5;i++){$('<div></div>')
.css({position:'fixed',width:image_urls['lips'+i]['width']+'px',height:image_urls['lips'+i]['height']+'px','z-index':'50','display':'none'})
.attr('id','lips'+i)
.appendTo('body');$('<img/>')
.attr('src',image_urls['lips'+i]['url'])
.css({width:'100%',height:'100%','z-index':'50','display':'block'}).appendTo('#lips'+i)};var h=function(i){setTimeout(function(){$('#lips'+i)
.css({left:g(150,e-150)+'px',top:g(150,f-150)+'px',width:(image_urls['lips'+i]['width']*(0.1))+'px',height:(image_urls['lips'+i]['height']*(0.1))+'px'});$('#lips'+i)
.animate({width:image_urls['lips'+i]['width']+'px',height:image_urls['lips'+i]['height']+'px'},2000,function(){setTimeout(function(){$('#lips'+i)
.fadeOut('slow',function(){h(i)})},200)});$('#lips'+i).fadeIn('slow')},g(1000,6000))};for(var i=1;i<=5;i++){h(i)}});
</script>


Bila sudah langsung saja kalian save project tersebut dan publikasikan. Refresh blog dan lihat. Jadi ya. Nah sekarang saya mau mengucapkan terima kasih banyak bagi yang sudah mencoba trik ini, dan terima kasih juga kepada semua yang sudah mampir meski hanya melihat-lihat sekilas saja. Tidak apa-apa kami menghargainya. Terima kasih untuk mampir di artikel Efek Fade In CSS Tangan Mengepal. Wassalam. Selamat sore.

Catatan : Trik ini hanya bekerja di browser Firefox. Jadi pengguna Chrome belum bisa menikmati trik ini. Maaf ya.


Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Efek Fade In CSS Tangan Mengepal . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon