Confetti Effect |

byANANT •
1
ʜᴛᴍʟ ᴄᴏᴅᴇ ʜᴇʀᴇ 👇 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confetti Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<section>
    <h2>Birthday Effect</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil repellat tenetur fugiat ut inventore similique eius voluptas architecto, dolore quasi dignissimos voluptatum odit itaque assumenda quam voluptatibus, quis repellendus explicabo! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum iste nobis deserunt dolores incidunt aperiam sapiente maxime, provident soluta laborum iure! Error hic eaque similique adipisci repudiandae eius illo praesentium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dicta at voluptatum mollitia doloremque culpa distinctio quae quod repudiandae consectetur quos repellendus sed asperiores eum illo modi obcaecati, debitis odit! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores porro, pariatur mollitia similique, doloribus voluptatibus voluptates molestiae magni velit cumque aliquid ipsam expedita numquam. Obcaecati dolorum in perspiciatis est cum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur ea accusantium accusamus, repudiandae minus nesciunt veniam! Cupiditate inventore atque aspernatur!</p>
    <button class="btn">Click Here</button>

    <div class="popup">
        <h2>Happy Birthday </h2>
        <b class="close">X</b>
    </div>

</section>

    <canvas id="my-canvas"></canvas>
<script src="index.min.js"></script>
    <script>
        let btn = document.querySelector('.btn');
        let popup = document.querySelector('.popup');
        let close = document.querySelector('.close')
        let confe = document.querySelector('#my-canvas')
        btn.onclick = function(){
            popup.classList.add('active');
            confe.classList.add('active');
        }
        close.onclick = function(){
            popup.classList.remove('active');
            confe.classList.remove('active');
        }
        var confettiSettings = { target: 'my-canvas' };
    var confetti = new ConfettiGenerator(confettiSettings);
    confetti.render();
    </script>
</body>
</html>
ᴄꜱꜱ ᴄᴏᴅᴇ ʜᴇʀᴇ 👇 


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
section{
    position: relative;
    padding: 60px;
}
section h2{
    font-size: 2em;
    margin-bottom: 10px;
}
section p{
    font-size: 1.1em;
}
section button{
    position: relative;
    padding: 15px 25px;
    margin-top: 20px;
    font-size: 1.1em;
    cursor: pointer;
}
.popup{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    width: 450px;
    height: 300px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1),
    0 0 0 1000px rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    visibility: hidden;
}
.popup.active{
    visibility: visible;
}
.close{
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
    background: #f00;
    color: #fff;
    cursor: pointer;
}

#my-canvas{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000000;
    visibility: hidden;
    pointer-events: none;
}
#my-canvas.active{
    visibility: visible;
}
ᴘʀᴏᴊᴇᴄᴛ ꜰᴜʟʟ ꜱᴏᴜʀᴄᴇ ᴄᴏᴅᴇ 👇

1 Comments

Previous Post Next Post