Texto con fondo en movimiento (problema)
He estado mirando el siguiente tutorial:
http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/
Lo he seguido paso a paso, pero a la hora de ver el resultado no funciona el efecto.
He mirado el código entero del ejemplo que tiene colgado en su web y nada, lo tengo igual pero el atributo background-position (que se aplica a la capa en la que está el texto sin color) no aparece en mi código al ejecutarlo y en el suyo si. Otra diferencia que encontré es que cuando me descargo el ejemplo, no se ejecuta, no aparecen los letreros del ejemplo.
Mi código es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Some title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="move-bg.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
body {
background-color: #666161;
}
.scrollBg {
background-image: url("http://img.alibaba.com/photo/408184833/HD_HT275_glass_mosaic.jpg");
background-color: #000000;
width: 600px;
height: 200px;
}
.scrollBg img {
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
moveBgAround();
});
function moveBgAround() {
var x = Math.floor(Math.random()*401);
var y = Math.floor(Math.random()*401);
var time = Math.floor(Math.random()*1001) + 2000;
$('.scrollBg').animate({
backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
}, time, "swing", function() {
moveBgAround();
});
}
</script>
</head>
<body>
<div class="scrollBg" style="background-image: url('http://img.alibaba.com/photo/408184833/HD_HT275_glass_mosaic.jpg')" >
<img alt="" src="images/bgimage.png" />
</div>
</body>
</html>
Usuario desconocido
Kostane
De nada me alegro de que te haya sido util, un saludo!
kostane
rls
Gracias rls :)
Usuario desconocido
no lo he probado pero mirando a simple vista, creo que te equivocas en ponerlo asi:
<script type="text/javascript" src="move-bg.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
siendo que deberia de ponerlo asi:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="move-bg.js"></script>
Un saludo!
kostane
Subido: http://fpepai.hostzi.com/
Host: 000webhost.
enrique_gonzalez
si aun tienes el problema, subelo a un hosting para echarle un vistazo sobre la marcha
kostane
Enrique Gonzalez
Mi versión está copiada en el post inicial, si quieres lo subo a un host gratuito. El código que postee no es el de mi página, ya que estoy probandolo en un archivo a parte para que una vez que funcione, poder implementarlo en mi web.
No sé si estoy usando dimensiones que no funcionen bien con este efecto, pero mi capa tiene que ser de alto 200px y de ancho 600px.
Michaellaspalmas
Gracias me lo miraré, pero el contenido del proyecto tiene que ser de cosecha propia, es decir, que nos permiten usar programas ni nada que se le parezca, solo librerías de jQuery y tal.
michaellaspalmas
Justo ayer acabo de ver eso:
Adobe ha lanzado la versión de prueba gratuita de Edge, una herramienta para crear animaciones con el estándar HTML5, Javascript y CSS. HTML5 está considerado como el gran rival de Flash, el recurso de Adobe para estos menesteres.
http://labs.adobe.com/technologies/edge/
He estado mirando y probando. Muy intuitivo para usar. Puede ser que aqui encuentras la solucion para tu problema.
enrique_gonzalez
puedes poner el enlace donde tienes subida tu versión?