<main>
<div id="fire">
<div id="fire-block"></div>
<div id="buche-stack">
<div class="buche"></div>
<div class="buche"></div>
</div>
</div>
<hr>
<div id="cmds">
<label>Multicolour</label>
<div class="switch">
<input id="switchbox" type="checkbox"/>
<div class="switch-object">
<div class="toggle"><span></span></div>
</div>
</div>
<label>Normal</label>
</div>
</main>
<a target="_blank" style="display: block; position: fixed; z-index:9999; bottom: 10px; right: 10px; width: 60px;" href="http://www.yoannbraie.fr/board/"><img style="width: 100%;" src="http://images.yoannbraie.fr/logoyb_white.png" alt="logo"/></a>
@import url('https://fonts.googleapis.com/css?family=Spartan&display=swap');
:root {
--cylinder-width: 170px;
--cylinder-height: 50px;
--fire-multiplier: 3;
}
body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
text-align: center;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(2,5,38,1) 100%, rgba(0,212,255,1) 100%);
}
main {
position: relative;
z-index: 1;
display: grid;
place-items: center;
}
@keyframes fireBurn {
0% { transform: rotate(0deg) translateX(0px) translateY(0px) scale(.9); opacity: 0.8;}
50% { transform: rotate(00deg) translateX(-20px) translateY(-20px) scale(1.1); opacity: 1;}
100% { transform: rotate(00deg) translateX(-30px) translateY(-30px) scale(.6); opacity: 0;}
}
.buche {
background-color: #821f1f;
width: var(--cylinder-width);
height: var(--cylinder-height);
position: relative;
border-radius: calc(var(--cylinder-height) / 2);
display: inline-block;
}
.buche::before {
content:"";
position: absolute;
left: 0;
top: 0;
background-color: #942d2d;
height: var(--cylinder-height);
width: var(--cylinder-height);
border-radius: 50%;
transform: scale(.95);
}
#buche-stack > .buche:nth-child(1) {
transform: rotateZ(-20deg) translateX(40px) translateY(40px);
}
#buche-stack > .buche:nth-child(2) {
transform: rotateZ(-160deg) translateX(40px) translateY(-40px);
}
#fire-block {
width: calc(var(--cylinder-height) * var(--fire-multiplier));
height: calc(var(--cylinder-height) * var(--fire-multiplier));
transform: rotate(45deg) translateX(10px) translateY(10px);
margin: auto;
z-index: 5;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
#buche-stack {
position: relative;
z-index: 3;
}
.fire-particle {
width: calc( (var(--cylinder-height) * var(--fire-multiplier)) / 5 );
height: calc( (var(--cylinder-height) * var(--fire-multiplier)) / 5 );
border-radius: 2px;
transition: background-color 1s;
}
.animType1 {
animation: fireBurn 2.1s linear 0s infinite;
}
.animType2 {
animation: fireBurn 2.2s linear .3s infinite;
}
.animType3 {
animation: fireBurn 2.3s linear .7s infinite;
}
.animType4 {
animation: fireBurn 2.4s linear 1s infinite;
}
.animType5 {
animation: fireBurn 2.5s linear 1.3s infinite;
}
.animType6 {
animation: fireBurn 2.6s linear 1.6s infinite;
}
.animType7 {
animation: fireBurn 2.7s linear 1.8s infinite;
}
.animType8 {
animation: fireBurn 2.8s linear 2s infinite;
}
hr {
opacity: 0;
margin: 40px 0;
}
.switch{
display: inline-block;
position: relative;
}
.switch > input[type="checkbox"]{
width: 100px;
height: 50px;
position: relative;
opacity: 0;
z-index: 2;
cursor: pointer !important;
}
.switch-object{
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
}
.toggle{
display: block;
width: 100%;
height: 100%;
background-image: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
border-radius: 20px;
transition: all .3s;
padding: 3px;
}
.switch-object > .toggle > span{
display: block;
border-radius: 50%;
width: calc(50% - 6px);
height: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
transition: all .3s;
transform: rotate(270deg);
}
.switch > input[type="checkbox"]:checked ~ .switch-object > .toggle{
background-image: linear-gradient(0deg, red, orange);
}
.switch > input[type="checkbox"]:checked ~ .switch-object > .toggle > span{
margin-left: calc(50% + 6px);
transform: rotate(0deg);
}
#cmds {
display: block;
}
label {
display: inline-block;
color: white;
position: relative;
vertical-align: top;
padding: 22px 5px;
width: 150px;
font-family: 'Spartan';
}
class Fire {
constructor(nbfire) {
this.nbfire = nbfire
this.multicolourfire = true;
this.fireblock = document.querySelector("#fire-block");
}
initSwitchEvent() {
let switchbox = document.querySelector("#switchbox");
switchbox.addEventListener("change", (self) => {
this.multicolourfire = !switchbox.checked;
this.reupdate();
});
}
create() {
for (var i = 0; i < this.nbfire; i++) {
let f = document.createElement("div");
f.classList.add("fire-particle");
f.classList.add("animType" + this.getRandomAnimClass());
f.style.backgroundColor = this.getRandomColor();
this.fireblock.appendChild(f);
}
}
reupdate() {
var fireIndex = 0;
Array.from(this.fireblock.children).forEach((elt) => {
fireIndex ++;
setTimeout(() => {
elt.style.backgroundColor = this.getRandomColor();
}, fireIndex * 100)
})
}
getRandomColor() {
if (this.multicolourfire) {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}else {
let colorTab = ["d6330e", "d64f0e", "e4980c", "d6330e", "e4340c", "e4b50c", "c5620e"];
return "#" + colorTab[Math.floor(Math.random() * colorTab.length)]
}
}
getRandomAnimClass() {
return Math.floor(1 + Math.random() * 8)
}
}
var fire = new Fire(25);
fire.initSwitchEvent();
fire.create();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.