EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';
var fireFrontContainer = document.getElementById('fireFront');
var fireMidContainer = document.getElementById('fireMid');
var fireBackContainer = document.getElementById('fireBack');
var NPFireFront = rand(10, 15);
var arrayPFireFront = [];
var NPFireMid = rand(80, 100);
var arrayPFireMid = [];
var NPFireBack = rand(100, 140);
var arrayPFireBack = [];
while (arrayPFireFront.length < NPFireFront) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    var fireParticle = new FireParticle('front');
    arrayPFireFront.push(fireParticle);
    fireFrontContainer.innerHTML += fireParticle.html;
}
window.CP.exitedLoop(1);
while (arrayPFireMid.length < NPFireMid) {
    if (window.CP.shouldStopExecution(2)) {
        break;
    }
    var fireParticle = new FireParticle('mid');
    arrayPFireMid.push(fireParticle);
    fireMidContainer.innerHTML += fireParticle.html;
}
window.CP.exitedLoop(2);
while (arrayPFireBack.length < NPFireBack) {
    if (window.CP.shouldStopExecution(3)) {
        break;
    }
    var fireParticle = new FireParticle('back');
    arrayPFireBack.push(fireParticle);
    fireBackContainer.innerHTML += fireParticle.html;
}
window.CP.exitedLoop(3);
function FireParticle(type) {
    if (type === 'front') {
        this.radius = rand(1, 15);
        this.margin = this.radius / 2;
        this.spped = randInt(1, 1.5);
        this.delay = randInt(1, 2);
        this.y = randInt(0.5, 1);
        this.x = randInt(40, 60);
    } else if (type === 'mid') {
        this.radius = rand(10, 30);
        this.margin = this.radius / 2;
        this.spped = randInt(0.2, 0.6);
        this.delay = randInt(0.5, 1);
        this.y = randInt(0.25, 0.5);
        this.x = randInt(35, 65);
    } else if (type == 'back') {
        this.radius = rand(10, 40);
        this.margin = this.radius / 2;
        this.spped = randInt(0.6, 0.8);
        this.delay = randInt(0, 0.5);
        this.y = randInt(0, 0.5);
        this.x = randInt(35, 65);
    }
    this.html = '<span style="width: ' + this.radius + 'px; height: ' + this.radius + 'px; left: ' + this.x + '%; bottom: ' + this.y + '%; margin-left: -' + this.margin + 'px; animation-delay: ' + this.delay + 's; animation-speed: ' + this.speed + 's"></span>';
}
function rand(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}
function randInt(min, max) {
    return Math.random() * (max - min) + min;
}

CSS

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
  25% {
    -webkit-transform: translateX(20px) translateY(0);
            transform: translateX(20px) translateY(0);
  }
  50% {
    -webkit-transform: translateX(0) translateY(-10px);
            transform: translateX(0) translateY(-10px);
  }
  75% {
    -webkit-transform: translateX(-20px) translateY(0);
            transform: translateX(-20px) translateY(0);
  }
  100% {
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
}
@keyframes float {
  0% {
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
  25% {
    -webkit-transform: translateX(20px) translateY(0);
            transform: translateX(20px) translateY(0);
  }
  50% {
    -webkit-transform: translateX(0) translateY(-10px);
            transform: translateX(0) translateY(-10px);
  }
  75% {
    -webkit-transform: translateX(-20px) translateY(0);
            transform: translateX(-20px) translateY(0);
  }
  100% {
    -webkit-transform: translateX(0) translateY(10px);
            transform: translateX(0) translateY(10px);
  }
}
@-webkit-keyframes fireFront {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    -webkit-transform: translateX(2.5px) translateY(-5px);
            transform: translateX(2.5px) translateY(-5px);
  }
  20% {
    -webkit-transform: translateX(0) translateY(-15px);
            transform: translateX(0) translateY(-15px);
  }
  30% {
    -webkit-transform: translateX(-2.5px) translateY(-20px);
            transform: translateX(-2.5px) translateY(-20px);
  }
  40% {
    -webkit-transform: translateX(0) translateY(-25px);
            transform: translateX(0) translateY(-25px);
  }
  50% {
    -webkit-transform: translateX(2.5px) translateY(-30px);
            transform: translateX(2.5px) translateY(-30px);
    opacity: 0.2;
  }
  60% {
    -webkit-transform: translateX(0) translateY(-35px);
            transform: translateX(0) translateY(-35px);
  }
  70% {
    -webkit-transform: translateX(-2.5px) translateY(-40px);
            transform: translateX(-2.5px) translateY(-40px);
  }
  80% {
    -webkit-transform: translateX(0) translateY(-45px);
            transform: translateX(0) translateY(-45px);
  }
  90% {
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
  }
  100% {
    -webkit-transform: translateX(0) translateY(-55px);
            transform: translateX(0) translateY(-55px);
    opacity: 0;
  }
}
@keyframes fireFront {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    -webkit-transform: translateX(2.5px) translateY(-5px);
            transform: translateX(2.5px) translateY(-5px);
  }
  20% {
    -webkit-transform: translateX(0) translateY(-15px);
            transform: translateX(0) translateY(-15px);
  }
  30% {
    -webkit-transform: translateX(-2.5px) translateY(-20px);
            transform: translateX(-2.5px) translateY(-20px);
  }
  40% {
    -webkit-transform: translateX(0) translateY(-25px);
            transform: translateX(0) translateY(-25px);
  }
  50% {
    -webkit-transform: translateX(2.5px) translateY(-30px);
            transform: translateX(2.5px) translateY(-30px);
    opacity: 0.2;
  }
  60% {
    -webkit-transform: translateX(0) translateY(-35px);
            transform: translateX(0) translateY(-35px);
  }
  70% {
    -webkit-transform: translateX(-2.5px) translateY(-40px);
            transform: translateX(-2.5px) translateY(-40px);
  }
  80% {
    -webkit-transform: translateX(0) translateY(-45px);
            transform: translateX(0) translateY(-45px);
  }
  90% {
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
  }
  100% {
    -webkit-transform: translateX(0) translateY(-55px);
            transform: translateX(0) translateY(-55px);
    opacity: 0;
  }
}
@-webkit-keyframes fireMid {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    -webkit-transform: translateX(2.5px) translateY(-10px);
            transform: translateX(2.5px) translateY(-10px);
  }
  20% {
    -webkit-transform: translateX(0) translateY(-20px);
            transform: translateX(0) translateY(-20px);
  }
  30% {
    -webkit-transform: translateX(-2.5px) translateY(-30px);
            transform: translateX(-2.5px) translateY(-30px);
  }
  40% {
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  50% {
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
    opacity: 0.1;
  }
  60% {
    -webkit-transform: translateX(0) translateY(-60px);
            transform: translateX(0) translateY(-60px);
  }
  70% {
    -webkit-transform: translateX(-2.5px) translateY(-70px);
            transform: translateX(-2.5px) translateY(-70px);
  }
  80% {
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  90% {
    -webkit-transform: translateX(2.5px) translateY(-90px);
            transform: translateX(2.5px) translateY(-90px);
  }
  100% {
    -webkit-transform: translateX(0) translateY(-100px);
            transform: translateX(0) translateY(-100px);
    opacity: 0;
  }
}
@keyframes fireMid {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    -webkit-transform: translateX(2.5px) translateY(-10px);
            transform: translateX(2.5px) translateY(-10px);
  }
  20% {
    -webkit-transform: translateX(0) translateY(-20px);
            transform: translateX(0) translateY(-20px);
  }
  30% {
    -webkit-transform: translateX(-2.5px) translateY(-30px);
            transform: translateX(-2.5px) translateY(-30px);
  }
  40% {
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  50% {
    -webkit-transform: translateX(2.5px) translateY(-50px);
            transform: translateX(2.5px) translateY(-50px);
    opacity: 0.1;
  }
  60% {
    -webkit-transform: translateX(0) translateY(-60px);
            transform: translateX(0) translateY(-60px);
  }
  70% {
    -webkit-transform: translateX(-2.5px) translateY(-70px);
            transform: translateX(-2.5px) translateY(-70px);
  }
  80% {
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  90% {
    -webkit-transform: translateX(2.5px) translateY(-90px);
            transform: translateX(2.5px) translateY(-90px);
  }
  100% {
    -webkit-transform: translateX(0) translateY(-100px);
            transform: translateX(0) translateY(-100px);
    opacity: 0;
  }
}
@-webkit-keyframes fireBack {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.8;
  }
  10% {
    -webkit-transform: translateX(2.5px) translateY(-20px);
            transform: translateX(2.5px) translateY(-20px);
  }
  20% {
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  30% {
    -webkit-transform: translateX(-2.5px) translateY(-60px);
            transform: translateX(-2.5px) translateY(-60px);
  }
  40% {
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  50% {
    -webkit-transform: translateX(2.5px) translateY(-100px);
            transform: translateX(2.5px) translateY(-100px);
    opacity: 0.1;
  }
  60% {
    -webkit-transform: translateX(0) translateY(-120px);
            transform: translateX(0) translateY(-120px);
  }
  70% {
    -webkit-transform: translateX(-2.5px) translateY(-140px);
            transform: translateX(-2.5px) translateY(-140px);
  }
  80% {
    -webkit-transform: translateX(0) translateY(-160px);
            transform: translateX(0) translateY(-160px);
  }
  90% {
    -webkit-transform: translateX(2.5px) translateY(-180px);
            transform: translateX(2.5px) translateY(-180px);
  }
  100% {
    -webkit-transform: translateX(0) translateY(-200px);
            transform: translateX(0) translateY(-200px);
    opacity: 0;
  }
}
@keyframes fireBack {
  0% {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
    opacity: 0.8;
  }
  10% {
    -webkit-transform: translateX(2.5px) translateY(-20px);
            transform: translateX(2.5px) translateY(-20px);
  }
  20% {
    -webkit-transform: translateX(0) translateY(-40px);
            transform: translateX(0) translateY(-40px);
  }
  30% {
    -webkit-transform: translateX(-2.5px) translateY(-60px);
            transform: translateX(-2.5px) translateY(-60px);
  }
  40% {
    -webkit-transform: translateX(0) translateY(-80px);
            transform: translateX(0) translateY(-80px);
  }
  50% {
    -webkit-transform: translateX(2.5px) translateY(-100px);
            transform: translateX(2.5px) translateY(-100px);
    opacity: 0.1;
  }
  60% {
    -webkit-transform: translateX(0) translateY(-120px);
            transform: translateX(0) translateY(-120px);
  }
  70% {
    -webkit-transform: translateX(-2.5px) translateY(-140px);
            transform: translateX(-2.5px) translateY(-140px);
  }
  80% {
    -webkit-transform: translateX(0) translateY(-160px);
            transform: translateX(0) translateY(-160px);
  }
  90% {
    -webkit-transform: translateX(2.5px) translateY(-180px);
            transform: translateX(2.5px) translateY(-180px);
  }
  100% {
    -webkit-transform: translateX(0) translateY(-200px);
            transform: translateX(0) translateY(-200px);
    opacity: 0;
  }
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

body {
  background: #1a252f;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 2;
}
.container .fire {
  width: 320px;
  min-width: 300px;
  height: 320px;
  min-height: 300px;
  position: relative;
  -webkit-animation: float 30s ease-in-out infinite;
          animation: float 30s ease-in-out infinite;
}
.container .fire.debug {
  border: 1px solid red;
}
.container .fire.debug .fire-front span,
.container .fire.debug .fire-mid span,
.container .fire.debug .fire-back span {
  background: none;
  border-radius: 0px;
  border: 1px solid blue;
}
.container .fire.debug .fireplace {
  border: 1px solid yellow;
}
.container .fire.debug .fireplace img {
  display: none;
}
.container .fire .fire-front {
  position: absolute;
  width: 60px;
  height: 120px;
  bottom: 20px;
  left: 50%;
  margin-left: -30px;
  z-index: 4;
}
.container .fire .fire-front span {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #ecf0f1;
  background: -webkit-radial-gradient(center, ellipse cover, #ecf0f1 0%, #ecf0f1 25%, rgba(236, 240, 241, 0) 100%);
  background: -webkit-radial-gradient(center ellipse, #ecf0f1 0%, #ecf0f1 25%, rgba(236, 240, 241, 0) 100%);
  background: radial-gradient(ellipse at center, #ecf0f1 0%, #ecf0f1 25%, rgba(236, 240, 241, 0) 100%);
  -webkit-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
  -webkit-animation-name: fireFront;
          animation-name: fireFront;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.container .fire .fire-mid {
  position: absolute;
  width: 100px;
  height: 180px;
  bottom: 15px;
  left: 50%;
  margin-left: -50px;
  z-index: 3;
}
.container .fire .fire-mid span {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #f1c40f;
  background: -webkit-radial-gradient(center, ellipse cover, #f1c40f 0%, #f1c40f 25%, rgba(241, 196, 15, 0) 100%);
  background: -webkit-radial-gradient(center ellipse, #f1c40f 0%, #f1c40f 25%, rgba(241, 196, 15, 0) 100%);
  background: radial-gradient(ellipse at center, #f1c40f 0%, #f1c40f 25%, rgba(241, 196, 15, 0) 100%);
  -webkit-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
  -webkit-animation-name: fireMid;
          animation-name: fireMid;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.container .fire .fire-back {
  position: absolute;
  width: 140px;
  height: 240px;
  bottom: 5px;
  left: 50%;
  margin-left: -70px;
  z-index: 2;
}
.container .fire .fire-back span {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #e67e22;
  background: -webkit-radial-gradient(center, ellipse cover, #e67e22 0%, rgba(230, 126, 34, 0) 100%);
  background: -webkit-radial-gradient(center ellipse, #e67e22 0%, rgba(230, 126, 34, 0) 100%);
  background: radial-gradient(ellipse at center, #e67e22 0%, rgba(230, 126, 34, 0) 100%);
  -webkit-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
  -webkit-animation-name: fireBack;
          animation-name: fireBack;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.container .fire .fireplace {
  width: 300px;
  height: 100px;
  position: absolute;
  bottom: -30px;
  left: 10px;
  z-index: 0;
}
.container .fire .fireplace > img {
  width: 100%;
  height: auto;
}

.background {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/background-fireplace.svg");
  background-repeat: no-repeat;
  background-size: 1024px 800px;
  background-position: center;
  position: absolute;
  top: 0;
  left: -40px;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-animation: float 30s ease-in-out infinite;
          animation: float 30s ease-in-out infinite;
  z-index: 1;
}

.moon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -300px;
  width: 400px;
  height: 400px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/moon.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

HTML

Recommendation

Join Effecthub.com