Home / Questions / 150059
Accepted
userStack
Asked: 2020-03-24 19:23:12 +0800 CST 2020-03-24 19:23:12 +0800 CST

three point movement

  • 772

I want to move the three dots consecutively

enter image description here

but they don't move vertically, I managed to move them horizontally

I found what I want but with css https://codepen.io/mattonit/pen/vLoddq

can it with 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>

javascript

4 Answers

  1. It would only be enough to remove the property of margin -1 px and set it as auto margin so that both vertical and horizontal elements and the display are accommodated instead of behaving in line as in block

    looking like this:

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

    Remaining the following result

        <!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

  2. I don't think they move, rather they change 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>

    • 1
  3. Best Answer

    I have made some changes to your code:

    • The index iis calculated from the number of elements of rootElements(in the original code we are doing modulo 10 and then comparing with 2, when in this particular case a modulus of 3 or the number of elements of rootElementswould be more convenient).
    • Instead of moving them by changing the margin, I have put them in a position relative to the circles and the value of the top. That way when one of the circles moves, the other circles don't move (or not an unexpected move).
    • With CSS I have given it an initial state and a value of transition, so with JavaScript, taking into account that we know which element is active ( i), all we have to do is remove the styles (so that it returns to the initial state), advance the value de iand give the styles we want to the next element to move. Eliminating the loop forin the code that doesn't seem to be really necessary.

    Here you can see a 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>

    The animation is not exactly like the one on Facebook (which looks like the one you are trying to replicate) because there is no pause at the end or the dots are never all 3 moving (both of which could be achieved with a second function and using setTimeoutdifferent times in place of setInterval).

    • 1

  4. Personally, if the animation you're after is always the same, I'd use an animated gif. You save code and problems.
    If you fancy doing it with JS, put each point in a different object with the CSS position:relative property and play around with its top property.
    Something like this:

    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>

    • 1