Adding a confetti animation effect to your Blogger website can bring a touch of fun and visual appeal to your online platform. This engaging animation feature, reminiscent of celebratory moments, can captivate visitors and enhance user experience. In this article, we will explore the step-by-step process of incorporating confetti animation into your Blogger website, from setting up the necessary tools to customizing the animation styles. Whether you want to add a festive flair to your site or create a memorable interactive experience for your audience, integrating confetti animation can liven up your online presence.
 |
| How to Add Confetti Animation Effect in Blogger Website |
1. Introduction to Confetti Animation Effect
What is Confetti Animation?
Confetti animation is like digital party poppers that sprinkle fun and festivity all over your website. It adds a touch of celebration and whimsy to your online space.
Benefits of Using Confetti Animation on Your Website
- Engagement: Dazzle your visitors and keep them on your site longer.
- Memorability: Make a lasting impression and stand out from the crowd.
2. Setting Up Your Blogger Website for Confetti Animation
Accessing Your Blogger Website Dashboard
Log in to your Blogger account, and navigate to the dashboard where all the magic happens.
Choosing the Page or Section for Confetti Animation
Decide where you want the confetti magic to happen – whether it's on the homepage, a specific post, or across the entire site.
3. Adding Confetti Animation Effect
To add Confetti Animation Effect to your blogger Template or specific page or post, just follow the following steps:
Go to >> your blogger dashboard and open your post, page or template code.
Now paste the following code at the end of post, page or template code:
<style>
.fire-btn {
background: #90ee90;
color: #000;
font-weight: bold;
font-size: 20px;
padding: 8px 32px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main-container">
<button class="fire-btn">Click Me!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
<script>
const fireBtn = document.querySelector(".fire-btn");
fireBtn.addEventListener("click", () => {
confetti({
particleCount: 300,
spread: 90,
origin: { x: 1, y: 0.9 },
});
confetti({
particleCount: 300,
spread: 90,
origin: { x: 0, y: 0.9 },
});
});
</script>Note: In template code paste it above the </body> tag.
Now click publish or save and your confetti animation effect is ready.
4. Conclusion
Wrap-Up and Summary of Confetti Animation Implementation
It's a wrap! Summarize your confetti animation journey and reflect on how it has enhanced your Blogger website. Celebrate your success with a confetti-filled finale!
