Animated Image Gallery
A beautiful, interactive webpage featuring image animations and dynamic text effects.
Features
🎨 Visual Effects
- Floating Image Cards: Images that gently float and respond to hover
- Gradient Backgrounds: Beautiful gradient backgrounds with glassmorphism effects
- Floating Shapes: Animated background elements that respond to mouse movement
- Smooth Transitions: All animations use smooth CSS transitions
📝 Text Animations
- Typewriter Effect: Words appear one by one with a typewriter animation
- Interactive Text: Hover effects on animated words
- Responsive Typography: Text scales beautifully on all devices
🖱️ Interactive Features
- Hover Effects: Images scale and show overlay information on hover
- Click Animations: Click any image card for a pulse effect
- Mouse Parallax: Background elements follow your mouse movement
- Keyboard Controls:
- Press ‘A’ to animate all cards
- Press ‘R’ to reset/reload the page
- Touch Support: Swipe gestures work on mobile devices
📱 Responsive Design
- Mobile Optimized: Works perfectly on phones and tablets
- Flexible Grid: Image cards automatically adjust to screen size
- Performance Optimized: Reduced animations on low-end devices
How to Use
- Open the webpage: Simply open
index.html
in any modern web browser
- Interact with images: Hover over image cards to see overlay effects
- Click images: Click any image for a pulse animation
- Use keyboard shortcuts: Press ‘A’ for animations, ‘R’ to reset
- Try touch gestures: On mobile, swipe up to animate, swipe down to reset
Technical Details
- HTML5: Semantic structure with accessibility in mind
- CSS3: Modern animations using keyframes and transforms
- Vanilla JavaScript: No external dependencies, pure JavaScript
- Responsive: CSS Grid and Flexbox for perfect layouts
- Performance: Optimized animations with hardware acceleration
Browser Support
- Chrome (recommended)
- Firefox
- Safari
- Edge
- Mobile browsers (iOS Safari, Chrome Mobile)
Customization
You can easily customize:
- Colors: Modify the gradient backgrounds in
styles.css
- Images: Replace the placeholder images with your own
- Text: Change the gallery title and image descriptions
- Animations: Adjust timing and effects in the CSS and JavaScript files
Enjoy your animated gallery! 🎉