Foros del Web » Programando para Internet » Javascript »

Movimiento Parallax

Estas en el tema de Movimiento Parallax en el foro de Javascript en Foros del Web. Hola a todos, estoy buscando un código para poder hacer un efecto de imagen que de sensación de profundidad, en el que unas imágenes se ...
  #1 (permalink)  
Antiguo 15/12/2008, 07:44
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Movimiento Parallax

Hola a todos, estoy buscando un código para poder hacer un efecto de imagen que de sensación de profundidad, en el que unas imágenes se muevan a distinta velocidad que otras, en estos ejemplos que os pongo hay algo como lo que busco pero no quiero que se active con el cursor ni con un botón de play ni nada, me gustaría que se activara directamente al entrar en la página y que fuese como un bucle, que nunca terminase: http://demo.rockettheme.com/index.php?template=vertigo
http://psych.hanover.edu/krantz/MotionParallax/MotionParallax.html

No quiero que sea un flash.

Espero haberme explicado.

Muchas gracias.
  #2 (permalink)  
Antiguo 15/12/2008, 08:45
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Movimiento Parallax

No creo que encuentres algo ya hecho que satisfaga todas tus expectativas, de manera que tendrás que intentar modificarlo. Si en el proceso ves que algo se te dificulta, no dudes en consultar.
  #3 (permalink)  
Antiguo 15/12/2008, 08:50
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 9 meses
Puntos: 105
Respuesta: Movimiento Parallax

ps creo que podrias hacerlo con javascript...... oviamente!! jaja

podrias poner un div de un ancho predeterminado y una imagen mucho mayor de ancho no??

luego con el setTimeOut le das que la posicion x vaya cambiando..... es decir, lo vas moviendo.... y creo que lo tendrias no??

suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #4 (permalink)  
Antiguo 15/12/2008, 13:11
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Movimiento Parallax

en realidad se usan dos imagenes para lograr el lop infinito.
__________________
twitter: @imbuzu
  #5 (permalink)  
Antiguo 15/12/2008, 13:52
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 9 meses
Puntos: 105
Respuesta: Movimiento Parallax

pero????? no son dos imagenes... se trata de solo la misma pero puesta una al inicio y una al final.... asi mientras va acabando.... va empezando......

es algo conocido el loop no???
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #6 (permalink)  
Antiguo 15/12/2008, 16:41
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Movimiento Parallax

Cita:
una al inicio y una al final
Según mi profe de mate en el kinder 1+1 = 2. Es acaso que he vivido engañado todo el tiempo? De ahí a que se pueda usar la misma imagen dos veces es otra cosa. Quizá no me expresé bien. La cosa es que se necesita una imagen que siga a la primera y después la primera sigue a la segunda y luego la segunda a la primera etc.

Yo usaría dos imágenes distintas así el loop se ve más largo.
__________________
twitter: @imbuzu
  #7 (permalink)  
Antiguo 16/12/2008, 03:49
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

Muchas gracias a todos por contestar ¿alguien sabe donde puedo hacerme con un código para lo que pretendo?
Muchas gracias de nuevo.
  #8 (permalink)  
Antiguo 16/12/2008, 03:50
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

No me importa modificar el código pero por lo menos tener un punto de partida.
Gracias.
  #9 (permalink)  
Antiguo 16/12/2008, 13:24
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Respuesta: Movimiento Parallax

masterojitos ya te dio el punto de partida.
__________________
twitter: @imbuzu
  #10 (permalink)  
Antiguo 17/12/2008, 03:14
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

Si te fijas bien en el ejemplo http://demo.rockettheme.com/index.php?template=vertigo

yo cuento 3 imágenes, una fija (no se mueve) que es en la que está el reno, luego estan los copos de nieve, el arbol y las montalas del primer plano y por último las montañas del segundo plano. Al mover el cursor de izquierda a derecha o viceversa se mueve la segunda y tercera imagen a distinta velocidad por lo que me imagino que se trata de imágenes diferentes.

No creo que (aunque le agradezco mucho la respuesta de masterojitos) se trate de un bucle o loop.

¿Qué opinais?
  #11 (permalink)  
Antiguo 17/12/2008, 04:30
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

¡¡¡Lo encontré!!!

A quien pueda interesar: http://www.iua.upf.es/~skourakis/programacion/parallax/parallax.html

Gracias a todos los que me han respondido!!!
  #12 (permalink)  
Antiguo 17/12/2008, 04:38
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

Creo que he cantado victoria antes de tiempo, la web que os he remitido hace el efecto con flash ¿es que así lo hacen en el template de joomla?


Estoy en un mar de dudas
  #13 (permalink)  
Antiguo 17/12/2008, 05:39
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Movimiento Parallax

carol1, como te dije, no creo que encuentres algo hecho y la verdad es perderás más tiempo buscando que haciendo.
La manera de encarar el problema podría ser esta, a ver qué te parece:
1)creás una capa que será tu escenario, con alto fijo, ancho fijo, overflow hidden y position relative, para que enmascare a las diferentes imágenes que va a contener.
2)colocás una imagen dentro de esa capa, que sea más ancha que la capa contenedora (el doble por lo menos), de manera que una parte quede enmasacarada por dicha capa, y que tenga position absolute, como para poder moverla libremente.
3)Creás una animación para esa imagen, semejante a la planteada en este ejemplo:
http://www.forosdelweb.com/2703729-post3.html

Cuando eso esté listo, seguís agregando imágenes transparentes a la capa contenedora, que tengan las mismas proporciones, y repetís el paso 3).

Para crear el efecto de perspectiva, la velocidad de animación de las primeras imágenes debe ser inferior a la de las últimas. También convendría que tuvieran las primeras un estilo opacity un poco menor que las últimas (la última debe ser opaca).

Última edición por Panino5001; 17/12/2008 a las 05:51
  #14 (permalink)  
Antiguo 17/12/2008, 05:52
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

Ok Panino, seguramente esa será la solución aunque con mis conocimientos más que justitos me quedo bizca al leerte, de todos modos lo voy a intentar.

Muchas gracias.
  #15 (permalink)  
Antiguo 17/12/2008, 06:05
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Movimiento Parallax

Empezá con la capa y la primera imagen e intentá que se mueva como el enlace que te mostré. Si algo no sale, volvé a postear, pero esta vez con el código, y te ayudaremos a que salga.
  #16 (permalink)  
Antiguo 17/12/2008, 09:31
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

Bueno, casi consigo lo que quiero con lo el código que me has mandado Panino, se mueve la capa donde tengo "logotype1.png" que queda al fondo del todo pero se quedan fijas las otras dos, no se como hacer para que "nubes.png" se muevan, y no es que no te entienda lo que dices pero es que no tengo ni idea de donde sale el movimiento de "logotype1.png" y creo que si no entiendo eso no entiendo nada. Te mando tu código modificado en plan chapucero por mi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
#externa{ width:600px; border:1px dashed #000; position:relative; overflow:hidden; height:150px}
#interna{ position:absolute;}

</style>
<script>
function t(id){return document.getElementById(id);}
function getStyle(id,w3cProp,IEProp){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle(t(id),null). getPropertyValue(w3cProp);
}else if(t(id).currentStyle){
return t(id).currentStyle[IEProp];
}else{
alert('No se encontró el estilo');
}
}
onload=function(){
var p,m;
p=m=parseInt(getStyle('externa','width','width'));
setInterval(
function(){
if(window.parar)return;
if(p<=-t('interna').offsetWidth)
p=m;
p-=5;
t('interna').style.left=p+'px';
},100);

t('externa').onmouseover=function(){window.parar=1 ;}
t('externa').onmouseout=function(){window.parar=0; }
}
</script>
</head>
<body>
<div id="externa">
<div id="interna"><img src="logotype1.png" width="388" height="237"></div>
<div id="interna"><img src="fondoverde.gif" width="1200" height="150"></div>
<div id="interna"><img src="nubes.png" width="1200" height="150"></div>
</div>
</body>
</html>
  #17 (permalink)  
Antiguo 17/12/2008, 09:45
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Movimiento Parallax

Probá así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>test</title>
<
style>
#externa{ width:600px; border:1px dashed #000; position:relative; overflow:hidden; height:150px}
#uno,#dos,#tres{ position:absolute;}

</style>
<
script>
function 
t(id){return document.getElementById(id);}
function 
getStyle(id,w3cProp,IEProp){
if(
window.getComputedStyle){
return 
document.defaultView.getComputedStyle(t(id),null). getPropertyValue(w3cProp);
}else if(
t(id).currentStyle){
return 
t(id).currentStyle[IEProp];
}else{
alert('No se encontró el estilo');
return 
null;
}
}
function 
mover(id,vel){
var 
p,m;
p=m=parseInt(getStyle('externa','width','width'));
setInterval(
function(){
if(
window.parar)return;
if(
p<=-t(id).offsetWidth)
p=m;
p-=vel;
t(id).style.left=p+'px';
},
10);
}
onload=function(){


mover('uno',.1)
mover('dos',.5)
mover('tres',1)

t('externa').onmouseover=function(){window.parar=;}
t('externa').onmouseout=function(){window.parar=0; }
}
</script>
</head>
<body>
<div id="externa">
<div id="uno"><img src="logotype1.png" width="388" height="237"></div>
<div id="dos"><img src="fondoverde.gif" width="1200" height="150"></div>
<div id="tres"><img src="nubes.png" width="1200" height="150"></div>
</div>
</body>
</html> 
Fijate ir variando las velocidades hasta que te quede como esperás

Última edición por Panino5001; 17/12/2008 a las 10:29
  #18 (permalink)  
Antiguo 18/12/2008, 03:45
 
Fecha de Ingreso: noviembre-2003
Mensajes: 18
Antigüedad: 20 años, 5 meses
Puntos: 0
Respuesta: Movimiento Parallax

Panino ¡¡¡¡GRACIAS, GRACIAS, GRACIAS,!!!! ¡¡Así si que sale!! no sabes cuanto te lo agradezco, es genial ver que hay gente dispuesta a echar una mano y dedicar su tiempo a ayudar al otro.

Muchísimas gracias de nuevo.

Carol.
  #19 (permalink)  
Antiguo 18/12/2008, 03:48
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Movimiento Parallax

Me alegra que te haya servido
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:56.