EffectHub.com: your best source for gaming

Recommendation

More Effects...

$(window).on('ready', function() {
  function generateFirefly() {
    var fly = [
      'fly0',
      'fly1',
      'fly2',
      'fly3',
      'fly4'
    ];
    var delays = [
      'delay0',
      'delay1', 
      'delay2', 
      'delay3', 
      'delay4'
    ];
    var sizes = [
      'size0',
      'size1',
      'size2',
      'size3',
      'size4'
    ];
    
    var ff = $('<div class="firefly"><div></div><div></div><div></div></div>');
    ff.addClass(delays[Math.floor(Math.random() * delays.length)]);
    ff.addClass(sizes[Math.floor(Math.random() * sizes.length)]);
    ff.addClass(fly[Math.floor(Math.random() * fly.length)]);
    
    var opacity = Math.random();
    var minOpacity = 0.9;
    opacity = opacity < minOpacity ? minOpacity : opacity;
    
    ff.css({
      'margin-top': ((Math.random() < 0.5 ? -1 : 1) * (Math.random() * 220)) + 'px',
      'margin-left': ((Math.random() < 0.5 ? -1 : 1) * (Math.random() * 500)) + 'px',
      'opacity': opacity
    });
    
    $('#scene').append(ff);
  }
  
  var count = Math.floor(Math.random() * 30) + 10; // at least 10
  for(var i = 0; i < count; i++) {
    generateFirefly();
  }
});

CSS

body {
  background: #000000;
  animation-name: dusk;
  animation-duration: 24000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
#scene {
  margin-top: -100px;
  padding-bottom: 100px;
  overflow: hidden;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(27,84,125,0.9) 0%, rgba(0,0,0,0.9) 100%);
}

.firefly {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  animation-name: fly;
  animation-duration: 6000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.firefly div { /* main body */
  width: 20px;
  height: 20px;
  background: #f5e964;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.firefly div:nth-child(1) {
  border: 1px solid #f7e72f;
  box-sizing: border-box;
}
.firefly div:nth-child(2) {
  display: block;
  background: rgba(245,233,100, .4);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: -5px;
  z-index: 2;
  opacity: 1;
  animation-name: pulse;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.firefly div:nth-child(3) {
  width: 38px;
  height: 38px;
  top: -9px;
  left: -9px;
  background: rgba(245,233,100, .3);
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  opacity: 1;
  animation-name: pulse2;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.firefly.fly1 {
  animation-name: fly1;
}
.firefly.fly2 {
  animation-name: fly2;
}
.firefly.fly3 {
  animation-name: fly3;
}
.firefly.fly4 {
  animation-name: fly4;
}

.firefly.size1 {
  transform: scale(0.8);
}
.firefly.size2 {
  transform: scale(1.1);
}
.firefly.size3 {
  transform: scale(0.9);
}
.firefly.size4 {
  transform: scale(1.3);
}

.firefly.delay1 {
  animation-delay: 200ms;
  animation-duration: 6010ms;
}
.firefly.delay1 div:nth-child(2),
.firefly.delay1 div:nth-child(3) {
  animation-duration: 880ms;
}

.firefly.delay2 {
  animation-delay: 300ms;
  animation-duration: 5090ms;
  animation-direction: normal;
}
.firefly.delay2 div:nth-child(2),
.firefly.delay2 div:nth-child(3) {
  animation-duration: 900ms;
}

.firefly.delay3 {
  animation-delay: 400ms;
  animation-duration: 7000ms;
  animation-direction: normal;
}
.firefly.delay3 div:nth-child(2),
.firefly.delay3 div:nth-child(3) {
  animation-duration: 1000ms;
}

.firefly.delay4 {
  animation-delay: 500ms;
  animation-duration: 9000ms;
  animation-direction: normal;
}
.firefly.delay4 div:nth-child(2),
.firefly.delay4 div:nth-child(3) {
  animation-duration: 700ms;
}
.grass {
  position: absolute;
  bottom: -500px;
  left: 0;
  right: 0;
  height: 818px;
  width: 100%;
  background-position: bottom 300px;
  background-repeat: repeat-x;
  background-image: url(http://i.imgur.com/zsaY11w.png);
  z-index: 3;
  transform: skew(10deg, 0deg);
  animation-name: sway;
  animation-duration: 3500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.fargrass {
  position: absolute;
  bottom: -500px;
  left: 0;
  right: 0;
  height: 818px;
  width: 100%;
  background-position: bottom left;
  background-repeat: repeat-x;
  background-image: url(http://i.imgur.com/zsaY11w.png);
  z-index: 1;
  transform: scale(0.9);
  opacity: 0.7;
}
.fargrass:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 818px;
  width: 100%;
  background-position: bottom right;
  background-repeat: repeat-x;
  background-image: url(http://i.imgur.com/zsaY11w.png);
  z-index: 2;
  transform: scale(1.1);
  opacity: 0.8;
}

@keyframes fly {
  0% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  16% {
    top: 51%;
    left: 48%;
    opacity: 0;
  }
  40% {
    top: 48%;
    left: 50%;
  }
  60% { 
    top: 50%;
    left: 49%;
    opacity: 1;
  }
  80% {
    top: 49%;
    left: 51%;
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
@keyframes fly1 {
  0% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  16% {
    top: 47%;
    left: 52%;
    opacity: 0;
  }
  40% {
    top: 48%;
    left: 49%;
  }
  60% { 
    top: 50%;
    left: 46%;
    opacity: 1;
  }
  80% {
    top: 46%;
    left: 51%;
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
@keyframes fly2 {
  0% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  16% {
    top: 46%;
    left: 48%;
    opacity: 0;
  }
  40% {
    top: 48%;
    left: 56%;
  }
  60% { 
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  80% {
    top: 49%;
    left: 51%;
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
@keyframes fly3 {
  0% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  16% {
    top: 53%;
    left: 48%;
    opacity: 0;
  }
  40% {
    top: 48%;
    left: 50%;
  }
  60% { 
    top: 50%;
    left: 51%;
    opacity: 1;
  }
  80% {
    top: 49%;
    left: 53%;
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}
@keyframes fly4 {
  0% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
  16% {
    top: 47%;
    left: 48%;
    opacity: 0;
  }
  40% {
    top: 48%;
    left: 51%;
  }
  60% { 
    top: 51%;
    left: 49%;
    opacity: 1;
  }
  80% {
    top: 49%;
    left: 48%;
    opacity: 0;
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;  
  }
  100% {
    opacity: 0.1;
  }
}
@keyframes pulse2 {
  0% {
    opacity: 1;  
    width: 38px;
    height: 38px;
    top: -9px;
    left: -9px;
  }
  80% {
    width: 42px;
    height: 42px;
    top: -11px;
    left: -11px;
  }
  95% {
    opacity: 0;
    width: 42px;
    height: 42px;
    top: -11px;
    left: -11px;
  }
  100% {
    opacity: 0;
    width: 38px;
    height: 38px;
    top: -9px;
    left: -9px;
  }
}

@keyframes sway {
  0% {
    background-position-x: 300px;
    transform: skew(10deg, 0deg);
  }
  100% {
    background-position-x: 270px;
    transform: skew(-2deg, 0deg);
  }
}

@keyframes dusk {
  0% {
    background: #456945;  
  }
  30% {
    background: #dd0000;
  }
  95% {
    background: #000000;
  }
  100% {
    background: #456945;
  }
}

HTML

Recommendation

Join Effecthub.com