Floating Dust

Floating Dust.markdown

Floating Dust

Floating dust particles using parallax.js

My first codepen pen!

A Pen by Matthew Williams on CodePen.

License.

index.html

<div class="slider-box">
  <input id="slider" type="range" min="1" max="199" step="1"/>
  <div id="range"></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>

script.js

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

scripts

<script src="http://wagerfield.github.io/parallax/deploy/parallax.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

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: 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);
  }
}

styles

<link href="http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css" rel="stylesheet" />