Art_101Demo

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

1. Open the webpage: Simply open index.html in any modern web browser
2. Interact with images: Hover over image cards to see overlay effects
3. Click images: Click any image for a pulse animation
4. Use keyboard shortcuts: Press ‘A’ for animations, ‘R’ to reset
5. 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! 🎉