🎨 Dynamic Items List Hover Animations

A collection of beautiful, easily configurable hover animations for lists of items. Built with pure HTML, CSS, and JavaScript - no dependencies required!

📚 Additional Documentation: Français | Usage Guide | Quick Reference

🌟 Features

• Multiple Animation Types: Gradient scale, fade, slide, rotate, color transition, and combined effects
• Easily Configurable: All animations use CSS variables for simple customization
• Interactive Controls: Real-time parameter adjustment in each demo
• Responsive Design: Works beautifully on all screen sizes
• Zero Dependencies: Pure vanilla JavaScript, HTML, and CSS
• Well Documented: Comprehensive documentation and examples

📂 Project Structure

dynamic-items-list-hover-animations/
├── index.html                      # Main landing page with links to all demos
├── gradient-scale/                 # ⭐ Featured: Gradient scale effect
│   ├── index.html
│   ├── style.css
│   └── script.js
├── fade-effect/                    # Fade/opacity effect
│   ├── index.html
│   ├── style.css
│   └── script.js
├── slide-effect/                   # Slide up effect
│   ├── index.html
│   ├── style.css
│   └── script.js
├── rotate-effect/                  # Rotation effect
│   ├── index.html
│   ├── style.css
│   └── script.js
├── color-transition/               # Color change effect
│   ├── index.html
│   ├── style.css
│   └── script.js
└── combined/                       # Multiple effects combined
    ├── index.html
    ├── style.css
    └── script.js

🚀 Getting Started

Quick Start

1. Clone the repository:

git clone https://github.com/Exaload/dynamic-items-list-hover-animations.git
cd dynamic-items-list-hover-animations

2. Open index.html in your web browser to see all available demos.

3. Navigate to any specific effect folder and open its index.html to see that animation in action.

No Build Required

All demos are static HTML files that can be opened directly in any modern web browser. No build process, bundler, or server required!

🎯 Animation Types

1. Gradient Scale Effect ⭐ (Featured)

The signature animation where hovering over an item makes it grow, with neighboring items scaling proportionally based on their distance from the hovered item.

Key Features:

• Dynamic gradient scale calculation
• Configurable scale factor (default: 1.8x)
• Adjustable gradient range (default: 3 items)
• Exponential decay for natural feel

Configuration:

:root {
    --hover-scale: 1.8;           /* Scale factor for hovered item */
    --transition-speed: 300ms;    /* Animation duration */
    --gradient-range: 3;          /* Number of neighbors affected */
    --base-size: 60px;           /* Base item size */
    --item-spacing: 10px;        /* Space between items */
}

2. Fade Effect

Items fade to a lower opacity when not hovered, creating a focus effect on the selected item.

Configuration:

:root {
    --fade-opacity: 0.3;         /* Opacity for non-hovered items */
    --transition-speed: 300ms;
}

3. Slide Effect

Items slide up vertically on hover with enhanced shadow effects.

Configuration:

:root {
    --slide-distance: 15px;      /* Distance to slide up */
    --transition-speed: 300ms;
}

4. Rotate Effect

Items rotate and scale slightly on hover for a playful interaction.

Configuration:

:root {
    --rotation-angle: 15deg;     /* Rotation angle on hover */
    --transition-speed: 300ms;
}

5. Color Transition

Smooth gradient color transitions from base colors to hover colors.

Configuration:

:root {
    --base-color-1: #16a085;     /* Base gradient start */
    --base-color-2: #1abc9c;     /* Base gradient end */
    --hover-color-1: #f39c12;    /* Hover gradient start */
    --hover-color-2: #f1c40f;    /* Hover gradient end */
}

6. Combined Effects

Multiple animations working together harmoniously. Includes:

• Gradient scale effect
• Color transitions (toggleable)
• Rotation (toggleable)
• Enhanced shadows

🛠️ How to Use in Your Project

Basic Integration

1. Copy the files: Copy the folder of the effect you want to use into your project.

2. Include in your HTML:

<link rel="stylesheet" href="path/to/style.css">
<script src="path/to/script.js"></script>

3. Add the HTML structure:

<div class="items-list" id="itemsList">
    <!-- Items will be generated by JavaScript -->
</div>

4. Customize: Adjust CSS variables to match your design.

Advanced Customization

You can customize any animation by modifying the CSS variables:

/* In your own CSS file */
:root {
    --hover-scale: 2.0;          /* Make items grow more */
    --transition-speed: 500ms;   /* Slower animation */
    --primary-color: #your-color; /* Change colors */
}

Or programmatically with JavaScript:

document.documentElement.style.setProperty('--hover-scale', '2.0');
document.documentElement.style.setProperty('--transition-speed', '500ms');

💡 Usage Examples

Example 1: Using Gradient Scale in Your Project

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="gradient-scale/style.css">
</head>
<body>
    <div class="items-list" id="itemsList"></div>
    <script src="gradient-scale/script.js"></script>
</body>
</html>

Example 2: Custom Configuration

<style>
    :root {
        --hover-scale: 2.2;
        --gradient-range: 4;
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
    }
</style>

Example 3: Combining Multiple Effects

See the combined/ folder for an example of how to integrate multiple animations together.

🎨 Customization Guide

Colors

Each animation uses CSS variables for colors. You can easily change them:

:root {
    --primary-color: #your-primary-color;
    --secondary-color: #your-secondary-color;
}

Sizes

Adjust item sizes and spacing:

:root {
    --base-size: 80px;          /* Larger items */
    --item-spacing: 15px;       /* More space between items */
}

Animation Speed

Control how fast animations occur:

:root {
    --transition-speed: 500ms;  /* Slower, more dramatic */
}

Behavior

Modify the JavaScript configuration at the top of each script.js file:

let config = {
    hoverScale: 2.0,
    transitionSpeed: 400,
    gradientRange: 4,
    itemCount: 20
};

📱 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers

All animations use standard CSS and JavaScript features supported by modern browsers.

🤝 Contributing

Contributions are welcome! Feel free to:

• Add new animation effects
• Improve existing animations
• Enhance documentation
• Report bugs or suggest features

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Created as a demonstration of pure CSS/JavaScript hover animations without dependencies.

📧 Contact

For questions or suggestions, please open an issue on GitHub.

---

Enjoy creating beautiful hover animations! 🎉