 (1).png)
Celebrate Navratri with a Fun Animation Project
Navratri is a vibrant festival celebrated in India, dedicated to honoring the divine feminine. It’s a time filled with joy, dance, and colorful decorations. To add a digital touch to this celebration, I created a simple web project featuring an animated greeting for Navratri. In this blog post, I’ll guide you through the project and share the source code so you can create your own festive celebration!
Project Overview
The project consists of a webpage that displays a cheerful greeting and an animated dancer image. When you click a button, the dancer performs a delightful bouncing animation, making the page come alive with the spirit of Navratri.
Key Features
- Festive Design: The background features vibrant images that capture the essence of the festival.
- Animated Dancer: The dancer image moves in a playful way when the button is clicked, inviting users to join in the celebration.
- Responsive and User-Friendly: The design adapts to different screen sizes, making it accessible on various devices.
How to Set Up the Project
Here’s a step-by-step guide to creating your own Navratri celebration animation.
1. Create Your HTML File
Start by creating an HTML file named index.html. This file contains the structure of your webpage:
2. Add the CSS Styles
Next, create a CSS file named styles.css to style your webpage. This file controls the appearance of your elements:
3. Write the JavaScript
Finally, create a JavaScript file named script.js. This script will handle the animation effect when the button is clicked:
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navratri Celebration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="title">🌼 Happy Navratri! 🌼</h1>
<div class="image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5VRZQXPXDyY16LaRM4gYAhnxnkZH5LZ-TFkOle-4UWXB1SV9q9AZNfs2ay8j9j4UmoWI&usqp=CAU.jpeg" alt="Dancer" class="dancer" />
</div>
<button id="celebrateBtn" class="celebrate-button">Celebrate!</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('Lakshmi Devi Paintings On Canvas.jpeg'); /* Replace with a festive background image URL */
background-size: cover;
background-position: center;
font-family: 'Arial', sans-serif;
color: #fff;
text-align: center;
}
.container {
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.title {
font-size: 3rem;
margin-bottom: 20px;
animation: fadeIn 2s ease-in-out;
}
.image-container {
position: relative;
}
.dancer {
width: 200px;
transition: transform 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes dance {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
.animate {
animation: dance 1s infinite;
}
.celebrate-button {
padding: 10px 20px;
font-size: 1.2rem;
color: #fff;
background-color: #ff4081;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.celebrate-button:hover {
background-color: #ff1f6e;
}
JavaScript Code
document.getElementById('celebrateBtn').addEventListener('click', function() {
const dancer = document.querySelector('.dancer');
dancer.classList.toggle('animate');
});
PHP Code
NO Need
Customization Tips
- Images: Replace the placeholder URLs with your own festive images for the background and dancer.
- Colors and Fonts: Feel free to adjust the colors and fonts in the CSS to better reflect your style and the spirit of Navratri.
Conclusion
This simple web project is a wonderful way to celebrate Navratri digitally. You can expand upon it by adding more interactive elements or animations. I hope you enjoy creating and sharing this project!
FAQ Section
1. What is Navratri? Navratri is a major Hindu festival celebrated over nine nights, dedicated to the worship of the goddess Durga. Each night is associated with different themes, colors, and rituals.
2. How can I customize the animation in the project? You can customize the project by changing the images in the HTML file, adjusting the colors in the CSS file, and modifying the animation effects in the CSS and JavaScript files.
3. Do I need any special software to run this project? No special software is required. You can run this project in any modern web browser. Just save the HTML, CSS, and JavaScript code in separate files and open the HTML file in your browser.
4. Can I use this project for commercial purposes? While you can use the project for personal learning and sharing, ensure that you have the right to use any images you choose, especially if you're considering commercial use.
5. What skills do I need to create this animation? Basic knowledge of HTML, CSS, and JavaScript is enough to create this animation. The project serves as a great way to practice and enhance your web development skills.
6. Is there any support if I have questions while working on the project? Feel free to leave comments on the blog post or reach out through social media. I'll be happy to help with any questions you may have!
Feel free to reach out if you have any questions or need further assistance. Happy coding, and have a joyous Navratri!