SCSS
// Color variables
$smoke : #fefefe;
$fireFront : #ecf0f1;
$fireMid : #f1c40f;
$fireBack : #e67e22;
// keyframes animations for the fire particles
@keyframes float {
0% { transform: translateX(0) translateY(10px); }
25% { transform: translateX(20px) translateY(0); }
50% { transform: translateX(0) translateY(-10px); }
75% { transform: translateX(-20px) translateY(0); }
100% { transform: translateX(0) translateY(10px); }
}
@keyframes fireFront {
0% { transform: translateX(0) translateY(0); opacity: 0.6; }
10% { transform: translateX(2.5px) translateY(-5px); }
20% { transform: translateX(0) translateY(-15px); }
30% { transform: translateX(-2.5px) translateY(-20px); }
40% { transform: translateX(0) translateY(-25px); }
50% { transform: translateX(2.5px) translateY(-30px); opacity: 0.2; }
60% { transform: translateX(0) translateY(-35px); }
70% { transform: translateX(-2.5px) translateY(-40px); }
80% { transform: translateX(0) translateY(-45px); }
90% { transform: translateX(2.5px) translateY(-50px); }
100% { transform: translateX(0) translateY(-55px); opacity: 0; }
}
@keyframes fireMid {
0% { transform: translateX(0) translateY(0); opacity: 0.6; }
10% { transform: translateX(2.5px) translateY(-10px); }
20% { transform: translateX(0) translateY(-20px); }
30% { transform: translateX(-2.5px) translateY(-30px); }
40% { transform: translateX(0) translateY(-40px); }
50% { transform: translateX(2.5px) translateY(-50px); opacity: 0.1; }
60% { transform: translateX(0) translateY(-60px); }
70% { transform: translateX(-2.5px) translateY(-70px); }
80% { transform: translateX(0) translateY(-80px); }
90% { transform: translateX(2.5px) translateY(-90px); }
100% { transform: translateX(0) translateY(-100px); opacity: 0; }
}
@keyframes fireBack {
0% { transform: translateX(0) translateY(0); opacity: 0.8;}
10% { transform: translateX(2.5px) translateY(-20px); }
20% { transform: translateX(0) translateY(-40px); }
30% { transform: translateX(-2.5px) translateY(-60px); }
40% { transform: translateX(0) translateY(-80px); }
50% { transform: translateX(2.5px) translateY(-100px); opacity: 0.1;}
60% { transform: translateX(0) translateY(-120px); }
70% { transform: translateX(-2.5px) translateY(-140px); }
80% { transform: translateX(0) translateY(-160px); }
90% { transform: translateX(2.5px) translateY(-180px); }
100% { transform: translateX(0) translateY(-200px); opacity: 0; }
}
// Normalizer for the html and body tag
html, body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
// apply some color to the body
body {
background: darken(#2c3e50, 10%);
}
.container {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
z-index: 2;
.fire {
width: 320px;
min-width: 300px;
height: 320px;
min-height: 300px;
position: relative;
animation: float 30s ease-in-out infinite;
&.debug {
border: 1px solid red;
.fire-front,
.fire-mid,
.fire-back {
span {
background: none;
border-radius: 0px;
border: 1px solid blue;
}
}
.fireplace {
border: 1px solid yellow;
img { display:none; }
}
}
.fire-front {
position: absolute;
width: 60px;
height: 120px;
bottom: 20px;
left: 50%;
margin-left: -30px;
z-index: 4;
span {
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
border-radius: 50%;
opacity: 0;
background-color: $fireFront;
background: -moz-radial-gradient(center, ellipse cover, rgba(236,240,241,1) 0%, rgba(236,240,241,1) 25%, rgba(236,240,241,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(236,240,241,1) 0%,rgba(236,240,241,1) 25%,rgba(236,240,241,0) 100%);
background: radial-gradient(ellipse at center, rgba(236,240,241,1) 0%,rgba(236,240,241,1) 25%,rgba(236,240,241,0) 100%);
transform: translateX(0) translateY(0);
animation-name: fireFront;
animation-delay: 0.2s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
}
.fire-mid {
position: absolute;
width: 100px;
height: 180px;
bottom: 15px;
left: 50%;
margin-left: -50px;
z-index: 3;
span {
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
border-radius: 50%;
opacity: 0;
background-color: $fireMid;
background: -moz-radial-gradient(center, ellipse cover,rgba(241,196,15,1) 0%,rgba(241,196,15,1) 25%, rgba(241,196,15,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover,rgba(241,196,15,1) 0%,rgba(241,196,15,1) 25%,rgba(241,196,15,0) 100%);
background: radial-gradient(ellipse at center,rgba(241,196,15,1) 0%,rgba(241,196,15,1) 25%,rgba(241,196,15,0) 100%);
transform: translateX(0) translateY(0);
animation-name: fireMid;
animation-delay: 0.2s;
animation-duration: 0.3s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
}
.fire-back {
position: absolute;
width: 140px;
height: 240px;
bottom: 5px;
left: 50%;
margin-left: -70px;
z-index: 2;
span {
display: inline-block;
position: absolute;
bottom: 0px;
left: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
border-radius: 50%;
opacity: 0;
background-color: $fireBack;
background: -moz-radial-gradient(center, ellipse cover,rgba(230,126,34,1) 0%, rgba(230,126,34,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover,rgba(230,126,34,1) 0%,rgba(230,126,34,0) 100%);
background: radial-gradient(ellipse at center,rgba(230,126,34,1) 0%,rgba(230,126,34,0) 100%);
transform: translateX(0) translateY(0);
animation-name: fireBack;
animation-delay: 0.2s;
animation-duration: 0.6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
}
.fireplace {
width: 300px;
height: 100px;
position: absolute;
bottom: -30px;
left: 10px;
z-index: 0;
>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%;
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;
}
ES6
/*
The javascript aims to create the necessary particles
and give them dynamic values such as, size and placement
for the fire effect but all animation are handeled by
css for an easier control in the behaviour
*/
//set vars
const fireFrontContainer = document.getElementById('fireFront');
const fireMidContainer = document.getElementById('fireMid');
const 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 ) {
var fireParticle = new FireParticle('front');
arrayPFireFront.push(fireParticle);
fireFrontContainer.innerHTML += fireParticle.html;
}
while ( arrayPFireMid.length < NPFireMid ) {
var fireParticle = new FireParticle('mid');
arrayPFireMid.push(fireParticle);
fireMidContainer.innerHTML += fireParticle.html;
}
while ( arrayPFireBack.length < NPFireBack ) {
var fireParticle = new FireParticle('back');
arrayPFireBack.push(fireParticle);
fireBackContainer.innerHTML += fireParticle.html;
}
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;
}
