Fireworks Show

Developer
Ariana Lynn
Size
3,048 Kb
Views
28,336
  1. Fireworks Show Previews
  2. Fireworks Show HTML Codes
  3. Fireworks Show CSS Codes
  4. Fireworks Show JS Codes

How do I make an fireworks show?

150 divs, in different colors, speeds and directions.No Libraries, no preprocessors, no images.. What is a fireworks show? How do you make a fireworks show? This script and codes were developed by Ariana Lynn on 05 September 2022, Monday.

Fireworks Show Previews
IQ Test

Fireworks Show - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fireworks Show</title> <style>
body, html {width:100%;height:100%;margin:0;padding:0;OVERFLOW:HIDDEN}
body {background:url('http://www.userlogos.org/files/backgrounds/soundofemotion/blue_gradient_holograph.jpg');background-size:cover;background-position:top}
</style>
<link rel="stylesheet" href="https://codepen.io/arianalynn/pen/xZMWXY.css"/> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="button button_border" onclick="document.getElementById('r').value='0';LaunchC();var d = setInterval(function(){LaunchC()},3000);setTimeout(function(){clearInterval(d)},6005)">Launch Colorful Display</button>
<br/>
<button class="button button_border" onclick="Launch()">LAUNCH</button>
<input type="range" min="0" max="360" value="180" id="r" oninput="c(this.value);this.style.boxShadow='0 0 20px 2px hsl('+ this.value+', 100%,50%)'" />
<!-- LAUNCHERS -->
<div id="h1" style="left:24%;-webkit-transform:rotate(7deg)"></div>
<div id="h2" style="left:calc(50vw - 150px)"></div>
<div id="h3" style="right:24%;;-webkit-transform:rotate(-7deg)"></div> <script src="js/index.js"></script>
</body>
</html>

Fireworks Show - Script Codes CSS Codes

.ball { width: 10px; height: 10px; border-radius: 100%; position: absolute; bottom: 20px; left: 50%
}
.button { margin: 25px 20px -15px; -webkit-transform: scale(0.8); -webkit-transform-origin: left top; -webkit-filter: brightness(2)
}
.button:hover { color: #000!important
}
#h1,
#h2,
#h3 { position: absolute; bottom: 0; width: 300px; height: 100vh; pointer-events: none
}
input { position: fixed; right: 0; top: 0; -webkit-appearance: none; margin: 47px 37px; width: 250px
}
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: #646464; border: none; border-radius: 3px
}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 5px; width: 5px; border-radius: 100%; background: grey; box-sizing: content-box; border: 6px solid #fff; margin-top: -6px
}
input[type=range]:focus { outline: none
}

Fireworks Show - Script Codes JS Codes

function g(a, n) { var divs = ""; for (var s = 0; s < 50; s++) { divs += '<div class="div ball" id="' + getRandom() + '"></div>'; } document.getElementById(a).innerHTML += divs;
}
g('h1');g('h2');g('h3');
function f(x, n, a) { var t = 0; setInterval(function() { if (t < 50) { x.style.bottom = (46 * t * n - t * t) + 20 + 'px'; x.style.height = 10 - t / 4.6 + 'px'; x.style.width = 10 - t / 4.6 + 'px'; if (t > 15) { x.style.left = (a * t + 150) + 'px'; x.style.bottom = (46 * t * n * n - t * t) + 20 + 'px'; } t += 1.3 } }, 50)
}
function Launch() { var i; for (i = 0; i < 150; i++) { var x = document.getElementsByClassName('div')[i]; var a = parseInt(x.id); x.style.left = '150px'; f(x, 1 + ((Math.random() * 5) + 1) / 100, a) }
}
function LaunchC() { var i; var v = 0; var s2 = setInterval(function() { for (i = 0; i < 50; i++) { var x = document.getElementsByClassName('div')[v]; var a = parseInt(x.id); x.style.left = '150px'; f(x, 1 + ((Math.random() * 5) + 1) / 100, a); v++; } document.getElementById('r').value = parseInt(document.getElementById('r').value) + 40; c(document.getElementById('r').value); if (v == 150) { clearInterval(s2); } }, 500);
}
function c(a) { var i; for (i = 0; i < 150; i++) { var x = document.getElementsByClassName('div')[i]; x.style.background = getRandomColor(a) } document.getElementById('r').style.boxShadow = '0 0 20px 1.5px hsl(' + document.getElementById('r').value + ', 100%,50%)';
}
function getRandom() { return Math.random() * 10 - 5
}
function getRandomColor(n) { var hue = Math.random() * 60 + parseInt(n - 30); return 'hsl(' + hue + ',100%,50%)'
}
c(document.getElementById('r').value);
Fireworks Show - Script Codes
Fireworks Show - Script Codes
Home Page Home
Developer Ariana Lynn
Username arianalynn
Uploaded September 05, 2022
Rating 3.5
Size 3,048 Kb
Views 28,336
Do you need developer help for Fireworks Show?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ariana Lynn (arianalynn) Script Codes
Name
Reveal Effect
Loading Loop
Material Buttons.css
Live Voting
Google Material Sliders
Bubbles in the Sky
Canvas Cloth with Strings
Dots and Shapes
Unit.js
-Webkit-Filter Demo
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!