<div class="slider-box">
  <input id="slider" type="range" min="1" max="199" step="1"/>
  <div id="range">1000px / 10.0s</div>
</div>
<ul id="scene" data-friction-x="0.03"
  data-friction-y="0.05">
  <li class="layer" id="specks" data-depth="0.1"></li>
  <li class="layer" id="layer-1" data-depth="0.15">
    <div class="img" id="img-1"></div>
  </li>
  <li class="layer" id="layer-2" data-depth="0.25">
    <div class="img" id="img-2"></div>
  </li>
  <li class="layer" id="layer-3" data-depth="0.45">
    <div class="img" id="img-3"></div>
  </li>
</ul>
html {
  background: linear-gradient(135deg, #2B7594 0%, #655900 100%);
  fixed;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
}

li {
    list-style-type: none;
}

.slider-box {
  float: right;
  margin: 10px 20px;
  position: relative;
  z-index: 1000;
}

#range {
  margin-top: 5px;
  color: #eee;
  font-size: 10pt;
  margin-left: 10px;
  position: relative;
}

#specks {
  position: absolute;
  z-index: 999;
  height: 100vh;
  width: 100vw;
}

.speck {
  opacity: 0;
  height: 4px;
  width: 4px;
  background: url('http://i1272.photobucket.com/albums/y391/matthew_williams10/speck_zpsu9xym9zl.png');
  background-size: cover;
  position: absolute;
  border-radius: 10px;
  z-index: 99;
}

.img {
  position: absolute;
  height: 100000px;
  width: 100000px;
  top: -8500px;
  left: -8000px;
  animation-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
  animation-name: float;
  animation-iteration-count: infinite;
}

#img-1 {
  opacity: 0.25;
  background: url('https://image.ibb.co/jcTvpv/dust1.jpg');
  background-repeat: repeat;
  animation-duration: 600s;
}

#img-2 {
  opacity: 0.2;
  background: url('https://image.ibb.co/goU1Uv/dust2.jpg');
  background-repeat: repeat;
  animation-duration: 450s;
}

#img-3 {
  opacity: 0.15;
  background: url('https://image.ibb.co/cymRwa/dust3.jpg');
  background-repeat: repeat;
  animation-duration: 350s;
}
/*ANIMATIONS*/

@keyframes twinkle {
  0% {
    transform: translate(0px, 0px);
  }
  30% {
    opacity: 0;
  }
  50% {
    opacity: 0.75;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: translate(175px, 100px);
  }
}

@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
      transform:translate(8000px, 4000px);
  }
}
//SLIDER
 var speed = 400;

$(document).ready(function(){
  var imgCount = $('.img').length
  $("#slider").on("change", function() {
    for (var i = 1; i <= imgCount; i++) {
      speed = 201 - this.value;
      $('#range').text(`1000px / ${speed/10}s`)
      speed = speed * (i / 1.25)
      $('#img-' + i).css({
        'animation-duration': speed + 's',
        'animation-name': 'float'
      });
    }
  });
});
                  
var parallax = $('#scene').parallax();

for (var i = 1; i < 6; i++) {
  twinkleLoop(i);
};

function twinkleLoop(i) {
  var duration = ((Math.random() * 5) + 3)

  duration = duration - ((495 - speed)/100)
  twinkle(i, duration)

  setTimeout(function() {
    twinkleLoop(i)
  }, duration * 1000);
}

function twinkle(id, duration) {
  var top = (Math.floor(Math.random() * 85) + 0) + '%';
  var left = (Math.floor(Math.random() * 85) + 0) + '%';

  $('#speck' + id).remove();
  $('#specks').append("<div class='speck' id='speck" + id + "'></div>")
  $('#speck' + id).css({
    'top': top,
    'left': left,
    'animation-duration': duration + 's',
    'animation-timing-function': 'cubic-bezier(0.250, 0.250, 0.750, 0.750)',
    'animation-name': 'twinkle',
  })
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/jquery.parallax.min.js