SIN JQuery, cómo cambiar contenido de DIV haciendo efecto de MOVIMIENTO ?

Anarko · #1 (**permalink**) 15/04/2013, 14:13

Hola.

Hay muchas webs con este efecto:

http://www.appnexus.com/

de cambiar el contenido haciendo efecto de mover el DIV a la izquierda.

Alguien tiene un código o conoce el método a utilizar ?

NOTA: por favor JS NATIVO, no JQUERY

GRACIAS

NOTA:
ellos lo hacen con gráficos.
Es posible el efecto de moverse con TEXTO?

chwc · #2 (**permalink**) 15/04/2013, 14:59

Hola ! si queres te explico el funcionamiento, es un div ( del ancho del elemento visible ), con adentro otro div ( de ancho de el elemento padre * la cantidad de cuadros ) , con adentro los elementos, que pasarán a tener un ancho del elemento visible, y flotando a la izquierda.

las transiciones se pueden hacer con CSS3, te dejo un ejemplo que recién realizé

http://codepen.io/anon/pen/hvbGd

un saludo

caricatos · #3 (**permalink**) 15/04/2013, 16:13

Hola:

La cuestión es dentro de una capa con posición relativa poner otra con posición absoluta; y en esa segunda capa acomodar el contenido (otras capas), luego usar un bucle para cambiar la posición (left) temporizando esos valores para reasignar el posicionamiento...

Una referencia: Transiciones: Desplazamientos.

Saludos

IsaBelM · #4 (**permalink**) 16/04/2013, 07:27

aquí tienes varios

Anarko · #5 (**permalink**) 19/04/2013, 22:52

Cita:

Iniciado por caricatos

Una referencia: Transiciones: Desplazamientos

Gracias Pepe.

No la entendí y es laaargo el código...

Cita:

Iniciado por IsaBelM

aquí tienes varios

Gracias IsaBelM.

Lo mas que he logrado es:

Código HTML:

<!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=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html, body {
width: 100%;
height: 100%;
background:#000;
}
.medidas{
min-width: 700px; /* mismo width de #contenedor */
max-width: 700px; /* mismo width de #contenedor */
min-height: 250px; /* mismo height de #contenedor */
max-height: 250px; /* mismo height de #contenedor */
z-index:999;
}
div#contenedor{
margin: 0 auto;
overflow: hidden;
border: 1px solid #CCC;
background:#aa0000;
color:#fff;
}
div#contenedor div.slider{
width: 300%; /* equivale al ancho de 3 imagenes. no tocar */
position: relative;
left: 0;
top: 0;
}
div#contenedor div.slider img {
float: left;
}
.txt{
background:#aabbcc;
text.align:center;
font-size:9em;
}
.txt2{
background:#aa0000;
text.align:center;
font-size:9em;
}
.txt3{
background:#ffb878;
text.align:center;
font-size:9em;
}
</style>
<script type="text/javascript">
function mover(posInicial,posFinal,slider){
if(posInicial<=posFinal){
	(function desplazar(){
		setTimeout(function(){
			if(posInicial>=posFinal){
				var clonarImagen=slider.getElementsByTagName('div')[0].cloneNode(true);
				slider.appendChild(clonarImagen);
				slider.removeChild(slider.getElementsByTagName('div')[0]);
				slider.style.left=0;
				return;
				}
			posInicial+=2;
			slider.style.left=-posInicial+'%';
			desplazar();
			},96);
			})();
			}
	setTimeout(function(){mover(0,posFinal,slider);},3000);
	}
window.onload=setTimeout(function(){var slider=document.querySelector('div.slider');mover(0,100,slider);},3000);
</script>
</head>
<body>

<div id="contenedor" class="medidas">
<div class="slider">
<div class="txt medidas">UNO</div>
<div class="txt2 medidas">DDD</div>
<div class="txt3 medidas">TTT</div>
<div class="txt medidas">QQQ</div>
</div>
</div>

</body>
</html>

Y como pueden ver, tiene un parpadeo HORROROSO...

No sé cómo corregirlo...

Quiero mover esos DIV, pero el TEXTO aparece de golpe :(

Anarko · #6 (**permalink**) 19/04/2013, 23:02

Ups!, acabo de ver que cambiando

Código HTML:

div#contenedor div.slider img{
float: left;
}

por

Cita:

div#contenedor div.slider div{
float: left;
}

el texto mejora, pero el PARPADEO continua HORROROSO...

Parece ebrio...

¿alguna idea?

Anarko · #7 (**permalink**) 19/04/2013, 23:41

Gracias todos por sus ayudas.

He cambiado el código y los números y ahora creo que no parpadea:

Código HTML:

<!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=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border:0;
}
html, body {
width: 100%;
height: 100%;
background:#000;
color:#fff;
}
.medidas{
min-width: 700px; /* mismo width de #contenedor */
max-width: 700px; /* mismo width de #contenedor */
min-height: 250px; /* mismo height de #contenedor */
max-height: 250px; /* mismo height de #contenedor */
}
div#contenedor{
margin: 0 auto;
overflow: hidden;
border: 1px solid #CCC;
background:#aa0000;
color:#fff;
}
div#contenedor div.slider{
width: 300%; /* equivale al ancho de 3 imagenes. no tocar */
position: relative;
left: 0;
top: 0;
text-align:center;
font-size:9em;
}
div#contenedor div.slider div{
float: left;
}
.txt{
background:#7dc12b;
}
.txt2{
background:#aa0000;
}
.txt3{
background:#ffb878;
}
.txt4{
background:#ffedd7;
color:#000;
}
h1,h2,.pp{
text-align:center;
}
</style>
<script type="text/javascript">
	var hielo=9000;
function mover(posInicial,posFinal,slider){
if(posInicial<=posFinal){
	(function desplazar(){
		setTimeout(function(){
			if(posInicial>=posFinal){
				var clonarImagen=slider.getElementsByTagName('div')[0].cloneNode(true);
				slider.appendChild(clonarImagen);
				slider.removeChild(slider.getElementsByTagName('div')[0]);
				slider.style.left=0;
				return;
				}
			posInicial+=2;
			slider.style.left=-posInicial+'%';
			desplazar();
			},17);
			})();
			}
	setTimeout(function(){mover(0,posFinal,slider);},hielo);
	}
window.onload=setTimeout(function(){var slider=document.querySelector('div.slider');mover(0,100,slider);},hielo);
</script></head><body><h2>Bienvenido!</h2>
<div id="contenedor" class="medidas">
	<div class="slider">
		<div class="txt medidas">UNO<br /><img src="http://www.w3.org/Icons/valid-html20.png" /></div>
		<div class="txt2 medidas">DDD<br /><img src="http://www.w3.org/Icons/valid-html401-blue.png" /></div>
		<div class="txt3 medidas">TTT<br /><img src="http://www.w3.org/Icons/valid-svgtiny12.png" /></div>
		<div class="txt4 medidas">QQQ<br /><img src="http://validator.w3.org/images/v15445.gif" /></div>
	</div>
</div><hr />
<p>Info...</p><p>Info...</p><p>Info...</p><hr /><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p></body></html>

Cómo lo ven ustedes?

...seria excelente tenerlo con un width del 100%, tipo banner largo...
quizas seria modificando el CSS...

A mi me esta funcionando en los 5 sin problema: IE, FF, C, O, S

Gracias de nuevo.

Anarko · #8 (**permalink**) 20/04/2013, 12:18

Hola, sigo son lograr que el DIV entre desde la izquierda y que NO APAREZCA de golpe.

Ademas el radius-border no funciona bien en Safari:

Código HTML:

<!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=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border:0;
}
html, body {
width: 100%;
height: 100%;
background:#000;
color:#fff;
}
.medidas{
min-width: 700px; /* mismo width de #contenedor */
max-width: 700px; /* mismo width de #contenedor */
min-height: 250px; /* mismo height de #contenedor */
max-height: 250px; /* mismo height de #contenedor */
}
div#contenedor{
margin: 0 auto;
overflow: hidden;
}
div#contenedor div.slider{
position: relative;
left: 0;
top: 0;
text-align:center;
font-size:9em;
border-radius:18px;
}
div#contenedor div.slider div{
border-radius:18px;/*Para S*/
float: left;
}
.txt{
background:#7dc12b;
}
.txt2{
background:#aa0000;
}
.txt3{
background:#ffb878;
}
.txt4{
background:#ffedd7;
color:#000;
}
h1,h2,.pp{
text-align:center;
}
</style>
<script type="text/javascript">
	var hielo=3000;
function mover(posInicial,posFinal,slider){
if(posInicial<=posFinal){
	(function desplazar(){
		setTimeout(function(){
			if(posInicial>=posFinal){
				var clonarImagen=slider.getElementsByTagName('div')[0].cloneNode(true);
				slider.appendChild(clonarImagen);
				slider.removeChild(slider.getElementsByTagName('div')[0]);
				slider.style.left=0;
				return;
				}
			posInicial+=2;
			slider.style.left=-posInicial+'%';
			desplazar();
			},18);
			})();
			}
	setTimeout(function(){mover(0,posFinal,slider);},hielo);
	}
window.onload=setTimeout(function(){var slider=document.querySelector('div.slider');mover(0,100,slider);},hielo);
</script></head><body><h2>Bienvenido!</h2>
<div id="contenedor" class="medidas">
	<div class="slider">
		<div class="txt medidas">UNO<br /><img src="http://www.w3.org/Icons/valid-html20.png" /></div>
		<div class="txt2 medidas">DDD<br /><img src="http://www.w3.org/Icons/valid-html401-blue.png" /></div>
		<div class="txt3 medidas">TTT<br /><img src="http://www.w3.org/Icons/valid-svgtiny12.png" /></div>
		<div class="txt4 medidas">QQQ<br /><img src="http://validator.w3.org/images/v15445.gif" /></div>
	</div>
</div><hr />
<p>Info...</p><p>Info...</p><p>Info...</p><hr /><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p></body></html>

Alguna ayuda extra... ¿?

IsaBelM · #9 (**permalink**) 22/04/2013, 07:33

has tocado una parte muy importante del css, que ponía no tocar

Cita:

div#contenedor div.slider{
width: 300%; /* equivale al ancho de 3 imágenes. no tocar */
position: relative;
left: 0;
top: 0;
text-align:center;
font-size:9em;
border-radius:18px;
}

Anarko · #10 (**permalink**) 22/04/2013, 08:20

Eres muy linda al corregir mi error IsaBelM.

Por tocar y tocar tu código, terminé eliminando esa linea.

Ya esta resuelto.