Web con fondo "cambiante"??

moro666 · #1 (**permalink**) 28/04/2012, 09:05

Primero de todo disculpas si esto no va en este foro, pero tampoco tengo la mas minima idea de con que lenguaje se tendria que hacer esto!
La otra cosa es que (ya se, ya se, este foro intenta lo contrario) no quiero aprender a hacerlo, me queda mucho en mi camino hasta llegar aqui, solo quiero ponerlo en una pagina de un amigo!

Bueno la idea es la siguiente, quiero un fondo de pantalla fijo, por ejemplo una bandera, nose. Lo que quiero es que una vez cargada la pagina web y mientras la estamos mirando vayan apareciendo pequeñas imagenes encima del fondo ya fijado. Es decir, imaginemos la bandera de japon de fondo de web, y de repente aparece una letra, despues otra, y otra y asi hasta ke se cierre la pagina. a poder ser si aparezen aleatoriamente ya seria la bomba.

Se que no estoy pidiendo algo rapido y facil, pero me haria mucha gracia poderlo poner en esa web. Aun estoy con sql+php y soy incapaz de hacer algo asi, pero mientras no sepa por mi solo me harian un gran favor ayudandome!

zerokilled · #2 (**permalink**) 28/04/2012, 09:55

buenas.
¿cuántos estás dispuesto a pagar? verás, estás pidiendo algo muy a la medida. al principio creí que era el acostumbrado efecto de cambiar el fondo, pero en realidad requieres más. no acostumbro a recomendarlo pero ya que tu interés es otro, revisa si existe algún plugin en alguna librería que te haga lo pides. y si no existe, desarrollalo en base a alguna librería que tenga una curva de aprendizaje bien baja, jquery por ejemplo.

moro666 · #3 (**permalink**) 28/04/2012, 10:11

Vale, en caso que exista algun plugin ya hecho nose como buscarlo....

Lo de pagar, por cuanto lo harias?

emprear · #4 (**permalink**) 28/04/2012, 10:12

Algo intermedio entre lo que pedís y lo que tan oportunamente te señala @zerokilled.

Código HTML:

Ver original<!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">
<head>
<title>Cambiar background cada n segundos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/* definimos como background por defecto la primera imagen de nuestra lista */
body {
background-image: url('sfondo01.jpg');
}
/* esta div no es visible, pero precarga la imagen siguiente a cargar por body, asi se evita algún posible parpadeo
definimos como background por defecto la 2ª imagen de nuestra lista.
Para la demo le damos un alto y ancho, pero debe establecerse a 0;
*/
div#precarga{
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
background-image: url('sfondo02.gif');
}
h1{
color: #0061C1;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
// aqui definis la lista de imágenes para el cambio automático
var fondos = ['sfondo01.jpg', 'sfondo02.gif', 'sfondo03.jpg', 'sfondo04.jpg', 'sfondo05.jpg', 'sfondo06.jpg', 'sfondo07.jpg'];
var fondo_actual = 0;
// aqui hacemos la rotación
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++;
var precargar2 = precargar+2;
// cambiamos el background del body
document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
// cargamos en el div no visible "#precarga" la imagen siguiente que se cargará en el body
// para ya tenerla en la cache, comenzamos con la imagen 3, ya que la 1 y 2 las tenemos en el css
document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
}
//aqui definís el tiempo en milisegundos e  inicias la función con setInterval para que se repita indefinidamente
window.setInterval(CambiarFondo, 10000); 
//]]>
</script>
</head>
<body>
<div id="precarga"><!-- precarga de backgrounds --></div>
<h1>Cambiar background cada n segundos</h1>
</body>
</html>

Ahora te resta adaptarla a tus necesidades.
Demo:
http://foros.emprear.com/javascript/...orotarbg2.html

Saludos

moro666 · #5 (**permalink**) 28/04/2012, 10:18

Bien! Es algo por lo que puedo empezar a aprender JS, mirare si con lo que se ahora puedo hacer mi idea, sino pos nada, a estudiar javascript!

Muchas gracias a los dos, pero por un precio razonable tambien lo compro!

zerokilled · #6 (**permalink**) 28/04/2012, 17:58

por cierto, si utilizas css3 el código resultante es mucho más sencillo ya que css3 te permite agregar más de una imagen de fondo para un mismo elemento. lo que requieres hacer es indicar múltiples valores url() en la propiedad background-image y luego múltiples coordenadas aleatorias para background-posiiton. cada valor tiene que estar separado por una coma. el procedimiento puede ser uno como el siguiente.

creas un array de rutas a las imagenes.
creas las variables ancho y alto asignandole como valores las dimensiones del viewport, y contador iniciado a 0.
en una función...
1. crea las variables coorx y coory, asignando un valor aleatorio entre 0 y el valor de las variables ancho y alto. al final de cada número, le concatenas el string "px".
2. obtienes una posición del array de imagenes con la operación contador módulo longitud del array.
3. concatenas dicho elemento a la propiedad backgroundImage. debes concatenarlo de forma que el nuevo elemento sea el primero en el string para que éste quede por encima de los demás. recuerda separar cada valor por una coma.
4. concatena las variables coorx y coory con la propiedad backgroundPosition. al igual que el punto anterior, el nuevo valor debe ser agregado al inicio del string y separar cada grupo por una coma.
5. sumas uno al contador.
6. creas un timer (setTimeout) con el nombre de esta misma función. nota: es para hacer una especie de bucle pero controlado por tiempo. un bucle normal te sirve pero dudo mucho que querás colgar el navegador ya que el bucle se interpreta uno tras otro.
invoca la función antes creada.

aún otros detalles que debes manejar en una hoja de estilo como evitar la repetición de la imagen y hacer que el fondo sea fijo. adicionalmente, en el procedimiento se asume que estamos trabajando con el fondo general del documento entero. si no se desea aplicar al fondo del documento, entonces las dimensiones a considerar es en base al elemento en que se asignará los fondos.

moro666 · #7 (**permalink**) 29/04/2012, 01:37

Estoy seguro de que la idea es genial, pero no llego tan lejos como para entender todo lo que has puesto!
Gracias de todas formas!