imagenes en movimiento

rascabuchitos · #1 (**permalink**) 02/11/2012, 22:45

hola amigos
alguien me podria recomendar algun manual para poder lograr
hacer que me salga una imagen de la derecha y otra de la izquierda para que terminen en el medio de mi web pero una encima de la mitad de la otra

gracias

IsaBelM · #2 (**permalink**) 03/11/2012, 06:41

aunque posteas en el foro de javascript, permiteme que te de una respuesta css3. propiedades de animación. ten en cuenta que ie no soporta esas propiedades

rascabuchitos · #3 (**permalink**) 03/11/2012, 08:11

Hola IsaBelM

gracia por el dato css3
pero dime ie no soporta animacion en css3 o en js

porque lo que trato de conseguir es algo como esto
http://www.toyotaperu.com.pe/advantage/
y que se vea en todos los navegadores desktop y moviles

gracias

IsaBelM · #4 (**permalink**) 03/11/2012, 15:48

lo que muestras es un *swf. con javascript puedes hacer esto. es un ejemplo que tendrás que desarrollar a tus necesidades

Cita:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
body {
font:76% normal verdana,arial,tahoma;
}

#bloqueIzq {
position:absolute;
left:0;
top:8em;
width:10em;
line-height:3em;
background:#99ccff;
border:1px solid #003366;
white-space:nowrap;
padding:0.5em;
}

#bloqueDer {
position:absolute;
right:0;
top:8em;
width:10em;
line-height:3em;
background:#99ccff;
border:1px solid #003366;
white-space:nowrap;
padding:0.5em;
}

</style>

</head>

<body>
<div id="bloqueIzq">
bloque izquierdo
</div>
<div id="bloqueDer">
bloque derecho
</div>

<script type="text/javascript">
var ancho = parseInt(screen.width)/2, intervalo = '';
(fnc = function() {
intervalo = setTimeout(function() {

//var l = parseInt(document.defaultView.getComputedStyle(doc ument.getElementById('bloqueIzq'), null).getPropertyValue('left'));
//var r = parseInt(document.defaultView.getComputedStyle(doc ument.getElementById('bloqueDer'), null).getPropertyValue('right'));

var l = parseInt(document.styleSheets[0].rules[1].style['left']);
var r = parseInt(document.styleSheets[0].rules[2].style['right']);

document.styleSheets[0].rules[1].style['left'] = l+5+'px';
document.styleSheets[0].rules[2].style['right'] = r+5+'px';

if ((l+30) >= ancho) {
clearTimeout(intervalo);
} else {
fnc();
}

},20);
}
)();
</script>
</body>
</html>

getComputedStyle es compatible con todos los navegadores modernos. para tener compatibilidad con versiones antiguas usa styleSheets

en cuanto a compatibilidad con móviles, ni idea

emprear · #5 (**permalink**) 03/11/2012, 16:29

Buena Script @IsaBelM, pero creo que para hacerla compatible la propiedad a usar es cssRules y no rules

@rascabuchitos
A esta altura, la palabra móviles, define tantas cosas que habria que ser más preciso.
Saludos

rascabuchitos · #6 (**permalink**) 04/11/2012, 02:12

muy buen script IsaBelM
voy a combinarlo con este que tengo

http://fenicia.org/desplazamiento/

emprear
por ahora moviles solo lo voy a tomar como tabletas pero si se puede tambien como smartphones y me pongo a investigar ya sobre cssRules y no rules

Gracias

IsaBelM · #7 (**permalink**) 04/11/2012, 09:00

emprear, gracias por ser tan sutil/suave en tu critica

yo seré algo mas dura conmigo misma

compatibilidades

Cita:

rules --> ie9-, chrome, safari
cssRules --> ie9+, chrome, safari, firefox, opera
getComputedStyle --> i9+, chrome, safari, firefox y opera

de tal modo que tendremos que usar ambas propiedades (rules y cssRules). se solventa con una condicional terciaria sobre la propiedad

ahora viene la gran critica. si os fijáis a cada tick del temporizador se obtiene el css computado. un gran error. solamente hay que obtenerlo en la primera invocación y después se le suma el desplazamiento y el resultado se le pasa como parámetro y un largo etcétera

Cita:

<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
body {
font:76% normal verdana,arial,tahoma;
}

#bloqueIzq {
position:absolute;
left:0;
top:8em;
width:10em;
line-height:3em;
background:#99ccff;
border:1px solid #003366;
white-space:nowrap;
padding:0.5em;
}

#bloqueDer {
position:absolute;
right:0;
top:8em;
width:10em;
line-height:3em;
background:#99ccff;
border:1px solid #003366;
white-space:nowrap;
padding:0.5em;
}
</style>
</head>
<body>

<div id="bloqueIzq">
bloque izquierdo
</div>
<div id="bloqueDer">
bloque derecho
</div>

<script type="text/javascript">
var intervalo = '';
var hoja = document.styleSheets[0];
var regla = hoja.cssRules? hoja.cssRules : hoja.rules;
// todos los navegadores incluido ie8-
//var leftProp = regla[1].style['left'];
//var rightProp = regla[2].style['right'];
// todos los navegadores excluido ie8-
var leftProp = parseInt(document.defaultView.getComputedStyle(doc ument.getElementById('bloqueIzq'), null).getPropertyValue('left'));
var rightProp = parseInt(document.defaultView.getComputedStyle(doc ument.getElementById('bloqueDer'), null).getPropertyValue('right'));

(fnc = function(l, r, lRule, rRule, ancho) {
var left = l+5;
var right = r+5;
intervalo = setTimeout(function() {

lRule.style['left'] = left + 'px';
rRule.style['right'] = right + 'px';

if ((left+30) >= ancho) {
clearTimeout(intervalo);
} else {
fnc(left, right, lRule, rRule, ancho);
}

},20);
}
)(parseInt(leftProp), parseInt(rightProp), regla[1], regla[2], parseInt(screen.width)/2);
</script>
</body>
</html>

para que sea compatible con versiones antiguas de ie, se descomenta y comenta las variables leftProp y rightProp

emprear · #8 (**permalink**) 04/11/2012, 15:11

doc ument.getElementById
Highlight @IsabelM, highlight por favor ...

Dejo una variante, la probé en un par de celulares con navegadores bastante limitados y funciona, aunque el desplazamiento no es muy suave que digamos, va como por etapas.
En IE 7 a 9 y el resto, funciona Ok

Código HTML:

Ver original<!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" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title>Desplazar capas</title>
<style type="text/css">
html,body {
margin: 0; padding: 0;
}
#bloqueIzq {
 position:absolute;
 left:0px;
 top:2em;
 width:50px;
 background:#68A460;
 border:1px solid #003366;
 padding:5px;
 z-index: 999;
 margin: 0;
 text-align: center;
 }
#bloqueDer {
 position:absolute;
 right:0px;
 top:2em;
 width:50px;
 background:#99ccff;
 border:1px solid #003366;
 padding:5px;
 z-index : 1;
 margin: 0;
 text-align: center;
 }
 </style>
<script type="text/javascript">
//<![CDATA[
// Utilizando winH podemos hacer el efecto aún cuando se redimensione la ventana
var winW;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
}
 
var i = 0;
var t;
function mover(margen,demora){
var pos = (winW/2)-margen; // margen igual a la cuarta parte del ancho del div (tener en cuenta posibles paddings laterales 
var capa = document.getElementById('bloqueIzq');
var capa2 = document.getElementById('bloqueDer');
i++;
t= setTimeout(function() {
            capa.style.left = i + 'px';
            capa2.style.right = i + 'px';
            mover(margen,demora);
            if(i > pos){
            clearTimeout(t);
            }
        }, demora);
}
//]]>
</script>
 </head>
<body onload="mover(15,1);">
<div id="bloqueIzq">I</div>
<div id="bloqueDer">D</div>
</body>
</html>

Saludos

rascabuchitos · #9 (**permalink**) 04/11/2012, 15:39

muy buenos tips chicos
muchas gracias

y si, es definito
no mezclare esto http://fenicia.org/desplazamiento/
con lo que me han pasado sino que hare las dos por separado para tener un mas opciones

ya les comento

ps.
puedo usar la validacion de moviles de este codigo para mi primer ejemplo?

IsaBelM · #10 (**permalink**) 04/11/2012, 17:43

Cita:

Iniciado por emprear

doc ument.getElementById
Highlight @IsabelM, highlight por favor ...

continua juntandote con el "mal bicho" y verás como acabas

no se me había ocurrido usar offsetWidth por si se redimensionaba la página

pero en tu código observo un problema. ahora las propiedes left y right tienen un valor de 0. pero, y si en lugar de 0, fuese 200px?? al no leer el css computado, los bloques empezarán su desplazamiento desde la posición (left, right) 0

emprear · #11 (**permalink**) 04/11/2012, 18:13

Cita:

Iniciado por IsaBelM

continua juntandote con el "mal bicho" y verás como acabas

Mal bicho? No tengo idea a que te refieres
Te juro que fué de motus propio, copié y pegué y no funcionaba

no se me había ocurrido usar offsetWidth por si se redimensionaba la página

pero en tu código observo un problema. ahora las propiedes left y right tienen un valor de 0. pero, y si en lugar de 0, fuese 200px?? al no leer el css computado, los bloques empezarán su desplazamiento desde la posición (left, right) 0

Asumí que estaba pegadas a los bordes, voy a ver si se puede perfeccionar

emprear · #12 (**permalink**) 04/11/2012, 19:18

En tanto left y right sean valores conocidos, podemos solucionarlo pasando el valor inicial de i como tercer parámetro de la función

Código Javascript:

Ver originalmover(margen,demora,i){

....

Código HTML:

Ver original<body onload="mover(15,1,200);">

Demo
http://foros.emprear.com/javascript/...pa_centro.html

Saludos

IsaBelM · #13 (**permalink**) 05/11/2012, 08:31

sabia que ibas a ir por ahí

si queremos que el código sea rígido, tu opción es válida. pero si queremos que sea dinámico, hay que leer el css computado

ahora que me he fijado con mas detenimiento, veo que has cometido el mismo error que yo en mi primer código. se ha de evaluar a cada tick

Cita:

var pos = (winW/2)-margen; // margen igual a la cuarta parte del ancho del div (tener en cuenta posibles paddings laterales
var capa = document.getElementById('bloqueIzq');
var capa2 = document.getElementById('bloqueDer');

habría que pasarlos como parámetros

emprear · #14 (**permalink**) 05/11/2012, 09:33

y yo estaba seguro que continuabas por acá...

La idea primaria es responder a la pregunta concreta del usuario, basándonos desde luego en la información que se tiene, y si se quiere infiriendo la que no se dispone, en este caso, ancho y posición inicial de los elementos a desplazar. Y a partir de ahi, "engendremos", como dice el inefable @furoya, optimicemos y universalicemos.

Tampoco digo que lo que hemos hecho hasta ahora sea exactamente lo mismo que lo que está en
http://www.toyotaperu.com.pe/advantage/
pero proporciona elementos para que @rascabuchitos continue por su cuenta

De todas formas siempre es atractivo participar en el juego de realizar mejoras y voy a ir viendo como darle más "dinamismo a la cosa".

furoya · #15 (**permalink**) 05/11/2012, 10:57

¿Vos también haciendo espam?

Cita:

Iniciado por emprear

Highlight @IsabelM, highlight por favor ...

Cita:

Iniciado por emprear

Te juro que fué de motus propio, copié y pegué y no funcionaba

Si, por supuesto, hiciste lo que cualquiera con un mínimo de criterio ¿A quién se le puede ocurrir otra cosa?
(Aunque yo prefiero las [code], esas highlight me traen mil problemas.)

Y para que alguien a quien no nombro, pero miro

< @> < @>

no diga después que vengo nada más que a destacar su mal uso de las herramientas del Foro; aprovecho a dejarles esto.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>ACERCA IMÁGENES.</title>
<script type="text/javascript">
var dist = 100;

function mueve() {
if(dist > 40) {
dist = dist - .25; 
document.getElementById("der").style.marginLeft = dist + "%";
document.getElementById("izq").style.marginRight = dist + "%";

setTimeout(mueve, 20);
}
}
onload = mueve;
</script>
<style type="text/css">
div {height: 128px; width: 100%; background-color: yellow; position: relative; }
#izq {display: inline; margin-right: 100%; position: absolute; right: 0px; }
#der {display: inline; margin-top: 24px; margin-left: 100%; position: absolute; left: 0; }
</style>

</head>
<body>
<div>
<img src="http://img197.imageshack.us/img197/2369/puzzleh.gif" id="der" />
<img src="http://img830.imageshack.us/img830/8478/puzzlev.gif" id="izq" />
</div>
</body>
</html>

emprear · #16 (**permalink**) 05/11/2012, 11:18

Muy interesante, digo, las piezas del puzzle, las tenemeos que hacer coincidir?

furoya · #17 (**permalink**) 05/11/2012, 13:42

De ninguna manera. La idea es mostrar otra forma de animación. Al usar márgenes del ciento por ciento, nos estamos asegurando de que las imágenes vengan siempre "desde fuera", y al teminar en menos del cincuenta por ciento sabemos que antes de detenerse se van a cruzar. Más, menos, pero se cruzan.

En cambio de esta forma

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CRUZA IMÁGENES.</title>
<script type="text/javascript">
var dist = 0;

function mueve() {
if(dist < 50) {
dist = dist + .25; 
document.getElementById("izq").style.marginLeft = dist + "%";
document.getElementById("der").style.marginRight = dist + "%";

setTimeout(mueve, 20);
}
}
onload = mueve;
</script>
<style type="text/css">
div {height: 128px; width: 100%; background-color: yellow; position: relative; }
#der {display: inline; margin-top: 24px; margin-right: 0%; position: absolute; right: 0px; }
#izq {display: inline; margin-left: 0%; position: absolute; left: 0; }
</style>

</head>
<body>
<div>
<img src="http://img197.imageshack.us/img197/2369/puzzleh.gif" id="der" />
<img src="http://img830.imageshack.us/img830/8478/puzzlev.gif" id="izq" />
</div>
</body>
</html>

arrancan visibles dentro de su caja (uno a cada lado) y se juntan hasta detenerse justo después de cruzarse totalmente.

IsaBelM · #18 (**permalink**) 06/11/2012, 05:26

para mi está claro. esta mano la gana furoya

furoya · #19 (**permalink**) 06/11/2012, 06:21

Qué espíritu competitivo tenés, querida.

Si fuera por "ganar", ni posteo donde estén ustedes porque las apuestas las tengo mil a uno, en contra.

Aunque alguno pueda pensar que mis códigos son mejores que los tuyos, porque no se cortan a causa de estar entre etiquetas de cita.

rascabuchitos · #20 (**permalink**) 07/11/2012, 03:06

maestros...¡¡¡¡
y me sigo esforzando para mantener mi dignidad como aprendiz...