Movement of three dots

Question

Movement of three dots

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (1 votes)

4

I want to move the three dots consecutively

but do not move vertically, I managed to move them horizontally

I found what I want but with css    link

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

asked by x-rw 24.03.2018 в 04:23

source

4 answers

1

It would only be enough to remove the property of margin -1 px and put it as an auto margin so that the vertical and horizontal elements and the display are accommodated instead of behaving with in line that is like in block

Looking like this:

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

With the next result remaining

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

answered by 24.03.2018 в 04:43

1

I have made some changes to your code:

The index i is calculated from the number of elements of rootElements (in the original code module is being made of 10 and then compare with 2, when in this particular case a module of 3 or the number of elements of rootElements would be more convenient).
Instead of moving them by changing the margin, I have put a position relative to the circles and change the value of top . That way when one of the circles moves, the other circles do not move (or not an unexpected movement).
With CSS I have given an initial status and a value of transition , then with JavaScript, taking into account that we know which element is active ( i ) the only thing we have to do is remove the styles (so that return to the initial state), advance the value of i and give the styles that we want to the next element to move. Removing the for loop in the code that does not 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 Facebook's (which looks like the one you're trying to replicate) because there's no pause at the end or the points are never moving 3 (both could be achieved with a second function and using setTimeout with different times instead of setInterval ).

answered by 24.06.2018 в 21:07

1

Personally, if the animation you are looking for is always the same, I would use an animated gif. You save code and problems.
If you enjoy doing it with JS, put each point in a different object with the CSS property position: relative and play with its top property.
Something similar to 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>

answered by 24.06.2018 в 23:56

How to replace contents of an array with elements of another array JQUERY Center text regardless of the lines of the text

score 1 · Accepted Answer

I do not think they move but 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>