بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
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":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31wUp7jWO4gmvhUithULbtGSIFAdWxWW90AntzxM75xtdHYxq9o_sL-E8y7hRbTJR498Pc3Ci0PYZzfueBbRWP3AyeG1fANuR6j4e83JYWTTRY_-MZDgFZB8bkkp_BBEr-IIS7PTJp5s/s400/lips1.png","width":"60","height":"68"};
image_urls['lips2']={"url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uobRErsp5GCUZCuqx-nf3iLKGwLbI89Qn99e0KAc2WPzOdPYsgjH96c36Ewdui-F4PnOcFO1oNIZ7SIOzaddfcMmUEOVL7j4KQSb04SvMcSANs1M53g__mEAzl86T2v7HCl8-9W2blo/s400/lips2.png","width":"60","height":"68"};
image_urls['lips3']={"url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYjwI3IMfbeGOdbSQrbEYpjhvKmDGrlmyUZvfjSAr_ULsT8Ve09nSd1Lcs28r0ZEYnZvsIFQeTKi1qJYMKYWbQiXB7n3CZSQanyKHa8TMDmSpTixSx2w5jUdbiilUBBassP4Gea3UFOtE/s400/lips3.png","width":"60","height":"68"};
image_urls['lips4']={"url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBP18jC2aprzsGsfokGwoRmBQ4Uo0TZyXPXerhRlBl64J0TWeSAwHJ8Mo-RHTmGyO0KsrMBQ1SwVfqu8HxV2BtLzb9WHuR2wWpFv3d4FjI5xRYnimzDTfkyFMuo2N5bLjPWIoHRcAChss/s400/lips4.png","width":"60","height":"68"};
image_urls['lips5']={"url":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yWBwGE_aYA8r_JWj2BHxwsQtwLFr1dTNIEGZHuIG26twMmWEmPvk0J1MDownQxfwTszRb999sHg1rE5w2QJzMbUuPViHd6HnlzAm49SqDai6EEwrWhukvX4WfJO4INqpzTJyIo_zfAY/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.
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.
