Hola, hoy les traigo este aporte para los que quieran que su fondo, en cierto div, se ponga en movimiento:
1.- Código js
/**
* @author Alexander Farkas
* v. 1.22
*/
(function($) {
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
var oldCurCSS = $.curCSS;
$.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.end);
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);
3.- Script
<script src="ARCHIVO.js" type="text/javascript">
function moverf(){
$('#AQUI DIV DEL FONDO').animate({backgroundPosition: '0px -100px'},10000,function(){
$('#AQUI DIV DEL FONDO').animate({backgroundPosition: '0px 0px'},10000,moverf);
});
}
$(moverf);
</script> En donde dice AQUI DIV DEL FONDO pones el id del div.
En donde dice ARCHIVO.js Ahi colocas el nombre que le has dado al archivo del js
Ejemplo
Bueno, quedaría algo asi:
En nuestro css tendriamos
.content {
width:500px;
height:250px;
background-image:url(images/bg.png);
}Y la parte del div quedaria asi:
<div id="fondomovimiento" class="content"></div>Eso sería todo, Cualquier duda pregunten aqui ^^
aclaro que este código no es mio, simplemente lo recopile
