https://github.com/rajofearth/glitch-diwali
A festive Diwali greeting slider that transforms into a glitch experience! Built with HTML, CSS, and vanilla JavaScript. 🪔→👨💻
https://github.com/rajofearth/glitch-diwali
Last synced: 3 months ago
JSON representation
A festive Diwali greeting slider that transforms into a glitch experience! Built with HTML, CSS, and vanilla JavaScript. 🪔→👨💻
- Host: GitHub
- URL: https://github.com/rajofearth/glitch-diwali
- Owner: rajofearth
- License: mit
- Created: 2024-11-01T08:04:03.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-01T08:22:20.000Z (7 months ago)
- Last Synced: 2025-01-15T13:07:25.748Z (4 months ago)
- Language: HTML
- Homepage: https://rajofearth.github.io/glitch-diwali/
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🪔 Glitch Diwali - A Festive Slider with a Twist
## 🎉 Overview
Welcome to Glitch Diwali! This isn't your ordinary Diwali greeting - it's a fun, interactive web project that combines the warmth of festival wishes with a playful "hacker" surprise. Perfect for bringing some tech-savvy excitement to your Diwali celebrations!
## ✨ Features
### Festive Elements
- Beautiful radial gradient background with festive colors
- Smooth sliding animations with Diwali greetings
- Decorative diya elements for that traditional touch
- Auto-sliding messages of joy and prosperity
### The Twist! 🎭
- Hover over the creator's name to trigger "hacker mode"
- Watch as the entire page glitches with matrix-style effects
- See your IP address revealed in a dramatic terminal overlay
- Everything returns to normal after the "hack" - no harm done!
## 🚀 Live Demo
Check out the live demo here: [Glitch Diwali Demo](https://rajofearth.github.io/glitch-diwali/)
## 🛠️ Tech Stack
- Pure HTML5
- CSS3 with advanced animations
- Vanilla JavaScript
- ipify API for IP detection
## 📱 Browser Support
- Works on all modern browsers
- Responsive design - works on mobile too!
- Recommended browsers: Chrome, Firefox, Safari, Edge
## 🎮 How to Use
1. Open the webpage to see the festive slider
2. Let it auto-slide or use navigation buttons
3. For the fun part:
- Hover over "rajofearth" in the footer
- Watch the "hack" effect take over
- See your IP dramatically revealed
- Everything returns to normal in 3 seconds
## 🎨 Customization
Want to make it your own? Here are some quick customization points:
```css
/* Change the background colors */
body {
background: radial-gradient(circle, #YOUR_COLOR1, #YOUR_COLOR2);
}
/* Modify the slider timing */
setInterval(nextSlide, 4000); // Change 4000 to your preferred milliseconds
/* Adjust the glitch intensity */
@keyframes background-glitch {
/* Modify the color combinations */
}
```
## 📝 Educational Value
This project demonstrates several web development concepts:
- CSS Animations and Keyframes
- Async/Await JavaScript
- API Integration
- DOM Manipulation
- Timing Events
- Error Handling
## 🤝 Contributing
Feel free to fork and give it your own twist! Some ideas:
- Add more festival-themed animations
- Create new glitch effects
- Add sound effects
- Implement different reveal animations
## ⚠️ Note
This is a fun, educational project meant for entertainment. The "hacker" effect is purely cosmetic and doesn't actually hack anything! The IP address shown is public information obtained through the ipify API.
## 📜 License
MIT License - Feel free to use it for learning, sharing, and spreading festive joy! 🎉
## 🙏 Credits
- Created with ❤️ by [rajofearth](rajofearth.github.io)
- Special thanks to the ipify API
## 🎯 Final Words
Happy Diwali! Remember, sometimes the best way to celebrate tradition is to add your own modern twist to it. May your code be bug-free and your celebrations be bright! 🪔✨
---
*Made with joy for the coding community - 2024* 🚀