SCSS particles animation - create at random position, but move all particles in the same direction-CodePudding

I'm fairly new to SCSS so hopefully someone can help me out. I'm trying to move particles in the same direction (down), but because all the particles are placed randomly their destination also ends up random.

I would like to keep random placement, but once they are placed I want them all going in the same direction (down) and not in the random direction. I don't know how to do that without loosing random positioning generated with steps.

I know how to do this in CSS, but that would require specifying every path manually, which will be my final solution if I can get it to work with SCSS, unless someone can help me out?

Here is JSFiddle to show how it's behaving, but this is the part where random steps are created:

SCSS

@for $i from 1 through $dot-count {
  &:nth-of-type(#{$i}) {
    animation-name: move-path-#{$i};
    &:before {
      animation-duration: random(5000)   5000ms, random(1000)   7000ms;
      animation-delay: random(6000)   500ms, 0s;
    }
  }
  $steps: random(15)   10;
  @keyframes move-path-#{$i} {
    @for $step from 0 through $steps {
      #{$step / $steps * 100%} {
        transform: translateX(random(100) - 50vw)
          translateY(random(100) - 50vh)
          scale(random(70) / 100   0.3);
      }
    }
  }
}

CodePudding user response：

You could define a random variable common to all your particles, use it to position your particles and then move them according to their step number and not randomly.

html {
  font-size: 30vmax / 1920 * 100;
  font-family: "Quicksand", sans-serif;
  background-color: #000;
  margin: 0;
  padding: 0;
  @media (max-width: 768px) {
    font-size: 50px;
  }
}

// Stars
$dot-color: #fff;
$dot-count: 35;

#milky-way {
  width: 100%;
}

.sky {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.dot {
  position: absolute;
  width: 0.08rem;
  height: 0.08rem;
  top: 50%;
  left: 50%;
  animation: 160s ease both infinite alternate;
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: $dot-color;
    transform-origin: -1rem;
    animation: lighting ease both infinite, auto-rotating ease both infinite;
  }
  @for $i from 1 through $dot-count {
    // Random variable common to all particles
    $random: random(100);
    &:nth-of-type(#{$i}) {
      animation-name: move-path-#{$i};
      &:before {
        animation-duration: random(5000)   5000ms, random(1000)   7000ms;
        animation-delay: random(6000)   500ms, 0s; // less than max duration
      }
    }
    $steps: random(15)   10;
    @keyframes move-path-#{$i} {
      
      @for $step from 0 through $steps {
        
        #{$step / $steps * 100%} {
          // first translation is depending on a common random, second is depending on the step number
          transform: translateX($random - 50vw) translateX($step * $step * 150px)
            translateY($random - 50vh) translateY($step * $step * 150px)
            scale(random(70) / 100   0.3);
        }
      }
    }
  }
}

@keyframes lighting {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 0.3rem 0.05rem $dot-color;
  }
}
@keyframes auto-rotating {
  to {
    transform: rotate(0deg);
  }
}