EffectHub.com: your best source for gaming

Recommendation

More Effects...

window.onload = function() {

var canvas = document.getElementById("sky");
      var context = canvas.getContext("2d");
      canvas.width = 960;
      canvas.height = 400;
      document.body.appendChild(canvas);

var particles = {},
          particleIndex = 0,
          settings = {
            density: 5,
            particleSize: 0.5,
            maxLife: 100,
          };

function Particle() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;

particleIndex++;
        particles[particleIndex] = this;
        this.id = particleIndex;
        this.life = 0;
        this.opacity = 0;
      }

Particle.prototype.draw = function() {

this.opacity += 0.1;
        this.life++;
        if (this.life >= settings.maxLife) {
          delete particles[this.id];
        }

context.clearRect(settings.leftWall, settings.groundLevel, canvas.width, canvas.height);
        context.beginPath();
        context.fillStyle= "rgba(255,255,255,"+this.opacity+")";
        context.arc(this.x, this.y, settings.particleSize, 0, Math.PI*2, true); 
        context.closePath();
        context.fill();

}

setInterval(function() {
        context.fillStyle = "rgba(0,0,20,0.2)";
        context.fillRect(0, 0, canvas.width, canvas.height);

// Draw the particles
        for (var i = 0; i < settings.density; i++) {
          if (Math.random() > 0.97) {
            new Particle();
          }
        }

for (var i in particles) {
          particles[i].draw();
        }
      }, 100);
    };

CSS

body {
  margin: 0;
  background-color: #7FEBBF;
  overflow: hidden;
}

canvas {
  position: absolute;
  margin: auto;
  left:0; right:0; top:0; bottom:0;
  z-index: -1;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lines {
  position: absolute;
  margin: auto;
  top:0; bottom:0; left:0; right:0;
  width: 960px;
  height: 400px;
  border: grey solid 1px;
  /* border-right: grey solid 5px; */
}

.lantern {
  position: absolute;
  top: 67px;
  left: 30px;
  width: 40px;
  height: 60px;
  background-color: rgba(255,255,255,0.3);
  border-top: #FACC43 solid 20px;
  border-bottom: #FACC43 solid 5px;
  border-left: #FACC43 solid 2px;
  border-right: #FACC43 solid 2px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  -webkit-animation: sway 1s infinite ease-in-out alternate;
  animation: sway 1s infinite ease-in-out alternate;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: scale(0.5);
}
.lantern:nth-child(2) { top: 65px; left: 340px; } 
.lantern:nth-child(3) { top: 70px; left: 820px; }
.lantern:nth-child(4) { top: 170px; left: 85px; }
.lantern:nth-child(5) { top: 170px; left: 460px; }
.lantern:nth-child(6) { top: 170px; left: 910px; }
.lantern:nth-child(7) { top: 258px; left: 650px; }
.lantern:nth-child(8) { top: 271px; left: 200px; }

.lantern#row-two{
  width: 25px;
  height: 33px;  
  border-top: #FACC43 solid 12px;
  border-bottom: #FACC43 solid 3px;
  opacity: 0.5;
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.lantern#row-three{
  width: 30px;
  height: 45px; 
  border-top: #FACC43 solid 15px;
  border-bottom: #FACC43 solid 5px;
  opacity: 0.85;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.hook{
  position: absolute;
  top:-25px;
  left: 15px;
  width: 10px;
  height: 0px;
  background-color: yellow;
  border-top: #FACC43 solid 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.lantern#row-two .hook{
  top:-16px;
  left: 7px; 
}
.lantern#row-three .hook{
  top:-20px;
  left: 10px;  
}
.hook:before{
  content: "";
  position: absolute;
  top:-15px;
  left: 5px;
  width: 1px;
  height: 5px;
  background-color: #FACC43;
}

.light {
  position: absolute;
  margin: auto;
  top:0; bottom:0; left:0; right:0;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 25px 15px yellow;
  box-shadow: 0 0 25px 15px yellow;
  background-color: yellow;
}
.light#blue {
  box-shadow: 0 0 25px 15px cyan;
  background-color: cyan;
}
.light#pink {
  box-shadow: 0 0 25px 15px hotpink;
  background-color: hotpink;
}
.light#white {
  box-shadow: 0 0 25px 15px white;
  background-color: white;
}

.sparkle {
  position: absolute;
  margin: auto;
  top:0; bottom:0; 
  left:70px; 
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: 0 0 3px 0.2px white;
  background-color: white;  
  -webkit-animation: sparkle 1.5s infinite ease-in-out;
  animation: sparkle 1.5s infinite ease-in-out ;
}

@-webkit-keyframes sway {
  0% {
    -webkit-transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(-20deg);
  }
}
@keyframes sway {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}

HTML

</div>

Recommendation

Join Effecthub.com