Loading

Fire Chickens

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Fire Chickens</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
	<div class="fire">
		<div id="fireFront" class="fire-front"></div>
		<div id="fireMid" class="fire-mid"></div>
		<div id="fireBack" class="fire-back"></div>
		<div class="fireplace"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/fireplace.svg" alt="Fire Place" /></div>
	</div>
</div>

<div class="background"></div>
<div class="moon"></div>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
@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;
  }
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

body {
  background: black;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.container .fire {
  width: 320px;
  min-width: 300px;
  height: 320px;
  min-height: 300px;
  position: relative;
  animation: float 60s ease-in-out infinite;
}
.container .fire.debug {
  border: 1px solid blue;
}
.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 blue;
}
.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: 1980px;
  height: 400px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #FF0000;
  background: -moz-radial-gradient(center, ellipse cover, #ecf0f1 0%, #ecf0f1 25%, rgba(236, 240, 241, 0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #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%);
  transform: translateX(0) translateY(0);
  animation-name: fireFront;
  animation-delay: 0.2s;
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
.container .fire .fire-mid {
  position: absolute;
  width: 100px;
  height: 7180px;
  bottom: 55px;
  left: 50%;
  margin-left: -50px;
  z-index: 3;
}
.container .fire .fire-mid span {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 990px;
  height: 990px;
  margin-left: -10px;
  border-radius: 50%;
  opacity: 0;
  background-color: #FF0000;
  background: -moz-radial-gradient(center, ellipse cover, #f1c40f 0%, #f1c40f 25%, rgba(241, 196, 15, 0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #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%);
  transform: translateX(0) translateY(0);
  animation-name: fireMid;
  animation-delay: 0.2s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  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: #FF0000;
  background: -moz-radial-gradient(center, ellipse cover, #e67e22 0%, rgba(230, 126, 34, 0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #e67e22 0%, rgba(230, 126, 34, 0) 100%);
  background: radial-gradient(ellipse at center, #e67e22 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;
}
.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("http://static.wixstatic.com/media/2238d366b8056a893e327d6f08b02564.wix_mp_256");
  background-repeat: no-repeat;
  background-size: 100px 100px;
  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("http://kindersay.com/files/images/chicken.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Downloaded from https://ahoj.co.uk/ */
'use strict';

/*
 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
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) {
	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;
}

This awesome code is write by Doctor Chicke Soup, you can se more from this user in the personal repository