<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap" rel="stylesheet">
</head>
<body>
<h1 class="animate__animated animate__zoomIn"> Mohit Designer </h1>
<div class="button_group">
<a href="javascript:void(0);" class="hvr-sweep-to-right animate__animated animate__slideInLeft" id="startConfetti" onclick="startConfetti()">Start Confetti</a>
<a href="javascript:void(0);" class="hvr-sweep-to-left animate__slideInRight animate__animated" id="stopConfetti" onclick="stopConfetti()">Stop Confetti</a>
</div>
<script src="confetti.js"></script>
<script type="text/javascript">
function startConfetti(){
confetti.start();
confetti.particleSpeed = 1000000000;
}
function stopConfetti(){
confetti.stop();
}
<!-- toggleConfetti(); -->
<!-- Pause the confetti falling animation. -->
<!-- pauseConfetti(); -->
<!-- Resume the confetti falling animation. -->
<!-- resumeConfetti(); -->
<!-- Toggle whether the confetti animation is paused. -->
<!-- togglePause(); -->
<!-- Destroy the confetti falling animation. -->
<!-- removeConfetti(); -->
<!-- Check if the animation is running. -->
<!-- isRunning(); -->
<!-- Check if the animation is paused. -->
<!-- isPaused(); -->
<!-- Specify the maximum number of the confetti. -->
<!-- confetti.maxCount = 200; -->
<!-- Set the animation speed in milliseconds. -->
<!-- confetti.particleSpeed = 3; -->
<!-- Set the frame interval. -->
<!-- confetti.frameInterval = 20; -->
<!-- Set the alpha opacity. -->
<!-- confetti.alpha = 1.0; -->
<!-- Decide whether to use gradients -->
<!-- confetti.gradient = false; -->
</script>
</body>
</html>
/*DESIGNER: MOHIT VERMA*/
*{
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
font-family: 'Satisfy', cursive;
width:100%;
height:100vh;
display:grid;
place-items: center;
margin: 0px;
padding: 0px;
}
h1 {
width: 100%;
text-align: center;
font-size: 7rem;
background: -webkit-linear-gradient(#aed037, #2b8039);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Sweep To Right */
.hvr-sweep-to-right {
font-family: 'Poppins', sans-serif;
font-size:2rem;
letter-spacing:2px;
background: -webkit-linear-gradient(#aed037, #2b8039);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
font-weight: 700;
padding: 20px 60px;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: -webkit-linear-gradient(#aed037, #2b8039);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: white;
-webkit-text-fill-color: #fff;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1.01);
-webkit-text-fill-color: #fff;
}
/* Sweep To Left */
.hvr-sweep-to-left {
letter-spacing:2px;
font-family: 'Poppins', sans-serif;
font-size:2rem;
background: -webkit-linear-gradient(#2b8039, #aed037);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
font-weight: 700;
padding: 20px 60px;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: -webkit-linear-gradient(#aed037, #2b8039);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
color: white;
-webkit-background-clip: text;
-webkit-text-fill-color: #fff;
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
-webkit-transform: scaleX(1);
-webkit-text-fill-color: #fff;
transform: scaleX(1);
}
.button_group{
max-width: 845px;
margin: -100px auto 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
a {
padding: 1rem 2rem;
border: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-radius:10px;
}
a:first-child {
border-image-source: linear-gradient(to left, #aed037, #2b8039);
}
a:last-child {
border-image-source: linear-gradient(to left, #2b8039, #aed037);
}
var confetti = {
maxCount: 150, //set max confetti count
speed: 2, //set the particle animation speed
frameInterval: 15, //the confetti animation frame interval in milliseconds
alpha: 1.0, //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
gradient: false, //whether to use gradients for the confetti particles
start: null, //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
stop: null, //call to stop adding confetti
toggle: null, //call to start or stop the confetti animation depending on whether it's already running
pause: null, //call to freeze confetti animation
resume: null, //call to unfreeze confetti animation
togglePause: null, //call to toggle whether the confetti animation is paused
remove: null, //call to stop the confetti animation and remove all confetti immediately
isPaused: null, //call and returns true or false depending on whether the confetti animation is paused
isRunning: null //call and returns true or false depending on whether the animation is running
};
(function() {
confetti.start = startConfetti;
confetti.stop = stopConfetti;
confetti.toggle = toggleConfetti;
confetti.pause = pauseConfetti;
confetti.resume = resumeConfetti;
confetti.togglePause = toggleConfettiPause;
confetti.isPaused = isConfettiPaused;
confetti.remove = removeConfetti;
confetti.isRunning = isConfettiRunning;
var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
var streamingConfetti = false;
var animationTimer = null;
var pause = false;
var lastFrameTime = Date.now();
var particles = [];
var waveAngle = 0;
var context = null;
function resetParticle(particle, width, height) {
particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
particle.x = Math.random() * width;
particle.y = Math.random() * height - height;
particle.diameter = Math.random() * 10 + 5;
particle.tilt = Math.random() * 10 - 10;
particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
particle.tiltAngle = Math.random() * Math.PI;
return particle;
}
function toggleConfettiPause() {
if (pause)
resumeConfetti();
else
pauseConfetti();
}
function isConfettiPaused() {
return pause;
}
function pauseConfetti() {
pause = true;
}
function resumeConfetti() {
pause = false;
runAnimation();
}
function runAnimation() {
if (pause)
return;
else if (particles.length === 0) {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
animationTimer = null;
} else {
var now = Date.now();
var delta = now - lastFrameTime;
if (!supportsAnimationFrame || delta > confetti.frameInterval) {
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
updateParticles();
drawParticles(context);
lastFrameTime = now - (delta % confetti.frameInterval);
}
animationTimer = requestAnimationFrame(runAnimation);
}
}
function startConfetti(timeout, min, max) {
var width = window.innerWidth;
var height = window.innerHeight;
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, confetti.frameInterval);
};
})();
var canvas = document.getElementById("confetti-canvas");
if (canvas === null) {
canvas = document.createElement("canvas");
canvas.setAttribute("id", "confetti-canvas");
canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
document.body.prepend(canvas);
canvas.width = width;
canvas.height = height;
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}, true);
context = canvas.getContext("2d");
} else if (context === null)
context = canvas.getContext("2d");
var count = confetti.maxCount;
if (min) {
if (max) {
if (min == max)
count = particles.length + max;
else {
if (min > max) {
var temp = min;
min = max;
max = temp;
}
count = particles.length + ((Math.random() * (max - min) + min) | 0);
}
} else
count = particles.length + min;
} else if (max)
count = particles.length + max;
while (particles.length < count)
particles.push(resetParticle({}, width, height));
streamingConfetti = true;
pause = false;
runAnimation();
if (timeout) {
window.setTimeout(stopConfetti, timeout);
}
}
function stopConfetti() {
streamingConfetti = false;
}
function removeConfetti() {
stop();
pause = false;
particles = [];
}
function toggleConfetti() {
if (streamingConfetti)
stopConfetti();
else
startConfetti();
}
function isConfettiRunning() {
return streamingConfetti;
}
function drawParticles(context) {
var particle;
var x, y, x2, y2;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
context.beginPath();
context.lineWidth = particle.diameter;
x2 = particle.x + particle.tilt;
x = x2 + particle.diameter / 2;
y2 = particle.y + particle.tilt + particle.diameter / 2;
if (confetti.gradient) {
var gradient = context.createLinearGradient(x, particle.y, x2, y2);
gradient.addColorStop("0", particle.color);
gradient.addColorStop("1.0", particle.color2);
context.strokeStyle = gradient;
} else
context.strokeStyle = particle.color;
context.moveTo(x, particle.y);
context.lineTo(x2, y2);
context.stroke();
}
}
function updateParticles() {
var width = window.innerWidth;
var height = window.innerHeight;
var particle;
waveAngle += 0.01;
for (var i = 0; i < particles.length; i++) {
particle = particles[i];
if (!streamingConfetti && particle.y < -15)
particle.y = height + 100;
else {
particle.tiltAngle += particle.tiltAngleIncrement;
particle.x += Math.sin(waveAngle) - 0.5;
particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
particle.tilt = Math.sin(particle.tiltAngle) * 15;
}
if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
if (streamingConfetti && particles.length <= confetti.maxCount)
resetParticle(particle, width, height);
else {
particles.splice(i, 1);
i--;
}
}
}
}
})();
