FIRE!

fire.markdown

FIRE!

Created for the December 2018 CodePen Challenge

A Pen by Inexorable Ace on CodePen.

License.

index.html

<section class="fireCont"></section>
<section class="fireCont"></section>
<section class="fireCont"></section>
<section class="fireCont"></section>
<section class="firetap"></section>
<section class="firetap"></section>
<section class="firetap"></section>
<section class="firetap"></section>

script.js

var i;
for (i = 0; i < 39; i++) { 
    $('.fireCont').append('<div class="fire"></div>');
    $('.firetap').append('<div class="firetip"></div>');
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

html, body{
  width: 1920px;
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: linear-gradient(to bottom, #101326 70%,#303344 100%);
}
.firetap:nth-child(5){
  position: absolute;
  bottom: 170px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end; 
}
.firetap:nth-child(6){
  position: absolute;
  bottom: 130px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end; 
}
.firetap:nth-child(7){
  position: absolute;
  bottom: 120px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end; 
}
.firetap:nth-child(8){
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 1920px;
  height: 200px;
  display: flex;
  align-items: flex-end; 
}
.firetap:nth-child(5) .firetip{
  width: 50px;
  height: 50px;
  background: saturate(#ce1e04, 20%);
  box-shadow: 0px 0px 45px 5px rgba(206,30,4,.5);
  border-radius: 25px;
  opacity: 0;
}
.firetap:nth-child(6) .firetip{
  width: 50px;
  height: 50px;
  background: saturate(#fd980f, 20%);
  box-shadow: 0px 0px 45px 5px rgba(253,152,15,.5);
  border-radius: 25px;
  opacity: 0;
}
.firetap:nth-child(7) .firetip{
  width: 50px;
  height: 50px;
  background: saturate(#fde37b, 20%);
  box-shadow: 0px 0px 45px 5px rgba(253,227,123,.5);
  border-radius: 25px;
  opacity: 0;
}
.firetap:nth-child(8) .firetip{
  width: 50px;
  height: 50px;
  background: saturate(#fef1d9, 0);
  box-shadow: 0px 0px 45px 5px rgba(254,241,217,.5);
  border-radius: 25px;
  opacity: 0;
}
.fireCont{
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 1920px;
  height: 500px;
  display: flex;
  align-items: flex-end;
}
.fire{
  position: relative;
  float: left;
  width: 50px;
  border-radius: 25px;
  height: 100%;
}
.fireCont:nth-child(1){
  height: 200px;
}
.fireCont:nth-child(1) .fire{
  background: saturate(#ce1e04, 20%);
  box-shadow: 0px 0px 45px 5px rgba(206,30,4,.5);
}
.fireCont:nth-child(2){
  height: 190px;
}
.fireCont:nth-child(2) .fire{
  background: saturate(#fd980f, 20%);
  box-shadow: 0px 0px 45px 5px rgba(253,152,15,.5);
}
.fireCont:nth-child(3){
  height: 150px;
}
.fireCont:nth-child(3) .fire{
  background: saturate(#fde37b, 20%);
  box-shadow: 0px 0px 45px 5px rgba(253,227,123,.5);
}
.fireCont:nth-child(4){
  height: 130px;
}
.fireCont:nth-child(4) .fire{
  background: saturate(#fef1d9, 0);
  box-shadow: 0px 0px 45px 5px rgba(254,241,217,.5);
}

@for $i from 1 through 39{
  .fireCont:nth-child(1) .fire:nth-child(#{$i}){
      animation: flameone random(3) + s ease-in-out $i * .09s infinite alternate;
  }
  .fireCont:nth-child(2) .fire:nth-child(#{$i}){
      animation: flametwo random(3) + s ease-in $i * .09s infinite alternate;
  }
  .fireCont:nth-child(3) .fire:nth-child(#{$i}){
      animation: flamethree random(3) + s ease $i * .09s infinite alternate;
  }
  .fireCont:nth-child(4) .fire:nth-child(#{$i}){
      animation: flamefour random(3) + s ease-out $i * .09s infinite alternate;
  }
  .firetap:nth-child(5) .firetip:nth-child(#{$i}){
      animation: flameoff random(5) + s ease-in-out $i * .09s infinite;
  }
  .firetap:nth-child(6) .firetip:nth-child(#{$i}){
      animation: flameoff random(5) + s ease-in-out $i * .09s infinite;
  }
  .firetap:nth-child(7) .firetip:nth-child(#{$i}){
      animation: flameoff random(5) + s ease-in-out $i * .09s infinite;
  }
  .firetap:nth-child(8) .firetip:nth-child(#{$i}){
      animation: flameoff random(5) + s ease-in-out $i * .09s infinite;
  }
}

@keyframes flameone{
  to{
    height: 120%;
  }
}
@keyframes flametwo{
  to{
    height: 90%;
  }
}
@keyframes flamethree{
  to{
    height: 110%;
  }
}
@keyframes flamefour{
  to{
    height: 80%;
  }
}
@keyframes flameoff{
  0%{
    opacity: 0;
    transform: translateY(0px) scale(.7, .7)
  }
  20%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translateY(-100px) scale(.1, .1)
  }
}