Bootstrap Snippet 2019 Happy Diwali Animation using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<title>Happy Diwali</title>
    <audio type="audio/mpeg" controls="none" id="audio1" src="http://santhosh.comxa.com/dsm/fire.mp3"></audio>
    
  
</script>
</head>
<body>
    <div class="container-fluid">
        <h1 class="red-text text-center">Happy Diwali 2019</h1>
        <br>
      <center><span>click on the screen</span>  </center>
    </div> 
<footer class="footer footer-inverse" style=" margin-bottom: 0;">
      <div class="container">
        <!-- Start of SimpleHitCounter Code -->
        
        <!-- End of SimpleHitCounter Code -->        
      </div>
</footer>
<br>
<br>
<p style="padding-top:40px" class="text-center top_spac"> Create by <a target="_blank" href="https://www.linkedin.com/in/sunil-rajput-nattho-singh/">Sunil Rajput</a></p> 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.red-text {
    font-family:Pacifico;
    color: red;
    font-size: 46px;
  }
html,body{height:100%;margin:0;padding:0;background-image: url("http://santhosh.comxa.com/dsm/moonlight.jpg");}
ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
img{border:0}
body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
#header img{width:100%; height:20%;}
#bg img{width:100%; height:80%;}
#header,#bg{position:fixed;left:0;right:0;z-index:10}
#header{top:0}
#bg{position:fixed;z-index:1;bottom:0}
audio{position:fixed;display:none;bottom:0;left:0;right:0;width:100%;z-index:5}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function(){
var Fireworks = function(){
     
var self = this;
var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
self.init = function(){ 
self.canvas = document.createElement('canvas');             
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();         
self.particles = [];    
self.partCount = 150;
self.fireworks = [];    
self.mx = self.cw/2;
self.my = self.ch/2;
self.currentHue = 30;
self.partSpeed = 5;
self.partSpeedVariance = 10;
self.partWind = 50;
self.partFriction = 5;
self.partGravity = 1;
self.hueMin = 0;
self.hueMax = 360;
self.fworkSpeed = 4;
self.fworkAccel = 10;
self.hueVariance = 30;
self.flickerDensity = 25;
self.showShockwave = true;
self.showTarget = false;
self.clearAlpha = 25;
$(document.body).append(self.canvas);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"2019 Happy Diwali Animation"
Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"2019 Happy Diwali Animation" Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"2019 Happy Diwali Animation"
Bootstrap 4.1.1 Snippet by sunil8107