Jumat, 29 Oktober 2010

Text On Moving Backgrounds with jQuery

Sobat tercinta, jika Beben si bloglang ganteng kalem tea memberikan sebuah link dalam postingan harap kunjungi dan lihatlah ada apa disana looks around :-? Pokoknya mah gaya dan semoga ada manfaatnya bagi skill kita deh :D Menemukan artikel gaya dan unik punya itu susah loh sob, tak saban waktu kita bisa mendapatkannya. Mungkin dengan berlangganan/follow pada sebuah web/blog salah satu jalan kita untuk tetap mengikuti update postingannya kan? Maka dari itu, kreatif dan selektif dalam menjalankan dunia blog (khususnya) diperlukan oleh sobat-sobat Beben tercinta :x Satu artikel full stylish from web Gaya stylish nih coba disimak yah "Text Moving Backgrounds with jQuery"

Dengan sebuah image transparan (PNG/GIF) kita dapat membuat satu kreasi background bergerak dengan sentuhan jQuery b-) Beberapa alat yang dibutuhkan dalam karya ini:

  1. Gambar latar belakang yang mantap punya.
  2. Gambar depan transparan guna menampakan efek gerak.
  3. Sedikit kode jQuery plug-in.
Biasanya kalau akan membuat file PNG yang berisi huruf anti-aliased dan meletakkannya didalam beberapa kontainer diatas latar belakang. Apa yang kita lakukan adalah menempatkan gambar penuh terhadap latar belakang, meliputi bagian yang tidak harus dilihat. Sama seperti sebuah topeng!

Kode CSS

.scrollBg {
background-image: url(background.jpg); 
background-color: #000000;
width: 487px;
height: 83px;
}
.scrollBg img {
display: block;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>Minimal versi jQuery yg dibutuhkan, jika sudah punya versi lebih baru jangan dipakai lagi, dan letakan di bawah kode tag <head>

jQuery Plug-in

<script type="text/javascript" src="url_to_moving_background.js"></script>
<script type="text/javascript">
/*
* @author Alexander Farkas
* v. 1.21
*/

(function($) {
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
var oldCurCSS = jQuery.curCSS;
jQuery.curCSS = function(elem, name, force){
if(name === 'background-position'){
name = 'backgroundPosition';
}
if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
return oldCurCSS.apply(this, arguments);
}
var style = elem.style;
if ( !force && style && style[ name ] ){
return style[ name ];
}
return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
};
}

var oldAnim = $.fn.animate;
$.fn.animate = function(prop){
if('background-position' in prop){
prop.backgroundPosition = prop['background-position'];
delete prop['background-position'];
}
if('backgroundPosition' in prop){
prop.backgroundPosition = '('+ prop.backgroundPosition;
}
return oldAnim.apply(this, arguments);
};

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}

$.fx.step. backgroundPosition = function(fx) {
if (!fx.bgPosReady) {
var start = $.curCSS(fx.elem,'backgroundPosition');
if(!start){//FF2 no inline-style fallback
start = '0px 0px';
}
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.options.curAnim.backgroundPosition);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
fx.bgPosReady = true;
}
//return;
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
};
})(jQuery);
</script>
Ini kode script pemanggil dari plugin diatas...
<script type="text/javascript">
$(document).ready(function() {
moveBgAround();
});

function moveBgAround() {
//give a random value from 0 to 400 for the X axis and the Y axis
var x = Math.floor(Math.random()*401);
var y = Math.floor(Math.random()*401);

//random generated time it takes to move
var time = Math.floor(Math.random()*1001) + 2000;

//make the background image move!
$('.scrollBg').animate({
backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
}, time, "swing", function() {
moveBgAround();
});
}
</script>
Kalau menurut cara diletakan dibagaian tag <head> coba dahulu letakin diatas kode </body> Selama pengalaman kalau script plugin di basis blogspot dapat disana kita menempatkannya (just try it) :P

Kode HTML

Ini bagian dimana kita mau pakai, dalam penggunaan tinggal memakai...<div class='scrollBg'>
<img src='overlay.png' alt='' />
</div>
Itu jika kita memakai gambar background yg telah diletakan pada bagian CSS secara permanen. Jika kita ingin menggunakan background masing² maka HTML yg digunakan dapat memakai cara berikut...<div class='scrollBg' style='background-image: url(http://link-gambar-nanti-yg-bergeraknya.jpg)'>
<img src='http://link-gambar-transparan-yg-nanti-diberi-efek-oleh-gambar-pertama-diatas.png' alt='' />
</div>Good luck and happy blogging \m/
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)