EffectHub.com: your best source for gaming

Recommendation

More Effects...

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

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',
  })
}

var speed = 400;
//SLIDER
$(document).ready(function(){
 $("#slider").on("change", function() {
       $('.speck').remove();
  for (var i = 1; i < 4; 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'
    });
  }
}); 
})

CSS

html {
  background: linear-gradient(135deg, #2B7594 0%, #655900 100%);
  fixed;
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
}

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

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

#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('http://i1272.photobucket.com/albums/y391/matthew_williams10/dust1_zpst8inukke.jpg');
  background-repeat: repeat;
  animation-duration: 600s;
}

#img-2 {
  opacity: 0.2;
  background: url('http://i1272.photobucket.com/albums/y391/matthew_williams10/dust2_zps9on59cjb.jpg');
  background-repeat: repeat;
  animation-duration: 450s;
}

#img-3 {
  opacity: 0.15;
  background: url('http://i1272.photobucket.com/albums/y391/matthew_williams10/dust3_zps9hjmkyei.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);
  }
}

HTML

Recommendation

Join Effecthub.com