4

Quiero mover los tres puntitos consecutivamente

introducir la descripción de la imagen aquí

pero no se mueven verticalmente, logre moverlos horizontalmente

encontre lo que quiero pero con css https://codepen.io/mattonit/pen/vLoddq

se puede con javascript?

let rootElements = document.querySelectorAll("div.dot");
let i = 0;

setInterval(() => {
  i++;
  if (i % 10 > 2) {
    i = 0;
  }
  rootElements[i % 10].style.margin = "0px";
  for (let j = 0; j < rootElements.length; j++) {
    if (j !== i) {
      rootElements[j].style.margin = "-1px";
    }
  }
}, 500);
.dot {
  display: inline-block;
  margin: -1px;
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

0

4 respuestas 4

1

He hecho algunos cambios en tu código:

  • El índice i se calcula a partir del número de elementos de rootElements (en el código original se está haciendo módulo de 10 y luego comparar con 2, cuando en este caso particular un módulo de 3 o del número de elementos de rootElements sería más conveniente).
  • En lugar de moverlos cambiando el margen, les he puesto una posición relativa a los círculos y se cambia el valor del top. De ese modo cuando se mueve uno de los círculos, los otros círculos no se mueven (o no un movimiento no esperado).
  • Con CSS le he dado un estado inicial y un valor de transition, entonces con JavaScript, teniendo en cuenta que sabemos qué elemento está activo (i) lo único que tenemos que hacer es quitarle los estilos (para que vuelva al estado inicial), avanzar el valor de i y darle los estilos que queramos al siguiente elemento a mover. Eliminando el bucle for que hay en el código que no parece ser realmente necesario.

Aquí puedes ver una demo:

let rootElements = document.querySelectorAll("div.dot");
let i = 0;

setInterval(() => {
  // cambiamos el elemento activo al estado original
  rootElements[i].style = "";
  
  // actualizamos el valor del elemento activo
  i=++i%rootElements.length;
  
  // cambiamos la posición y opacidad del elemento activo
  rootElements[i].style.top = "0px";
  rootElements[i].style.opacity = 1;
}, 350);
.dot {
  display: inline-block;
  top: 4px;
  position: relative;
  transition: all 0.35s;
  opacity: 0.4;
  font-size: 32px;
  float: left;
}
<div class="dots">
  <div class="dot">&#9679;</div>
  <div class="dot">&#9679;</div>
  <div class="dot">&#9679;</div>
</div>

La animación no es exactamente como la de Facebook (que parece la que tratas de replicar) porque no hay una pausa al final o los puntos nunca están los 3 en movimiento (ambas cosas se podrían conseguir con una segunda función y usando setTimeout con diferentes tiempos en lugar de setInterval).

1

Solo bastaría con quitar la propiedad de margin -1 px y ponerla como margin auto para que se acomoden los elementos tanto vertical como horizontal y el display en vez de que se comporte con en línea que se como en bloque

quedando así mira:

.dot {
  display: block;
  margin: auto;
}

Quedando el siguiente resultado

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    <style>
    .dot {
      display: block;
      margin: auto;
    }
      </style>
    </head>
    <body>
    <div id="padre">
      <div class="dot">*</div>
      <div class="dot">*</div>
      <div class="dot">*</div>
    </div>
      <script>
        let rootElements = document.querySelectorAll("div.dot");
    let i = 0;
    
    setInterval(() => {
      i++;
      if (i % 10 > 2) {
        i = 0;
      }
      rootElements[i % 10].style.margin = "0px";
      for (let j = 0; j < rootElements.length; j++) {
        if (j !== i) {
          rootElements[j].style.margin = "-1px";
        }
      }
    }, 500);
       
      </script>
    </body>
    </html>

1
  • edite mi pregunta, adjunte una imagen, revisalo porfavor Commented el 24 mar. 2018 a las 3:49
1

No creo que se muevan mas bien cambian de color.

let rootElements = document.querySelectorAll("div.dot");

let i = 0;

setInterval(() => {
  i++;
  if (i % 10 > 2) {
    i = 0;
  }
  for (let j = 0; j < rootElements.length; j++) {
    if (j !== i) {
      rootElements[j].style.color = "#999999";
      rootElements[j].style.animationName = "goingUp";
    }else{
      rootElements[j].style.color = "#555555"; 
      rootElements[j].style.animationName = "goingDown";
   }
  }
}, 300);
.dot {
  display: inline-block;
  margin: -1px;
  position: relative;
  animation: goingUp 2s infinite;
}

@keyframes goingUp {
    from {transform: translateY(0px);}
    to {transform: translateY(10px);}
}

@keyframes goingDown {
    from {transform: translateY(10px);}
    to {transform: translateY(0px);}
}
<div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
  <div class="dot">⚫</div>
</div>

0
1

Personalmente, si la animación que buscas es siempre la misma, usaría un gif animado. Te ahorras código y problemas.
Si te hace gracia hacerlo con JS, pon cada punto en un objeto distinto con la propiedad CSS position:relative y juega con su propiedad top.
Algo parecido a esto:

var ondas=[0,1,2,3,4,5,6,7,6,5,4,3,2,1];
var dots=document.getElementsByClassName("dot");
var indices=[];
for (var i=0; i<dots.length;i++)
  indices.push(Math.floor(ondas.length/dots.length*i));

function bucle(){
  for (var i=0; i<dots.length;i++) {
    var j=indices[i];
    dots[i].style.top=ondas[j]+"px";
    if (++j>=ondas.length) j=0;
    indices[i]=j;
  }
  requestAnimationFrame(bucle);
}
requestAnimationFrame(bucle);
.dot {position:relative};
<div>
	<span class="dot">*</span>
	<span class="dot">*</span>
	<span class="dot">*</span>
	<span class="dot">*</span>
	<span class="dot">*</span>
	<span class="dot">*</span>
	<span class="dot">*</span>
	<span class="dot">*</span>
	<span class="dot">*</span>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.