https://github.com/tmhsdigital/template_animation-demo
https://github.com/tmhsdigital/template_animation-demo
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tmhsdigital/template_animation-demo
- Owner: TMHSDigital
- License: other
- Created: 2024-08-13T19:28:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-16T03:16:49.000Z (over 1 year ago)
- Last Synced: 2025-02-24T06:44:07.662Z (11 months ago)
- Language: JavaScript
- Homepage: https://tmhsdigital.github.io/TEMPLATE_animation-demo/
- Size: 39.1 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Advanced Animation Demo Template
This template provides a cutting-edge foundation for showcasing interactive button animations and creative web effects. It's designed to be modular, easily customizable, and extendable with new demos.
## Features
- **Interactive Button Demos**: Including the mind-bending "Dimension Shifter", "Neon Pulse", and "Quantum Ripple" buttons.
- **Dynamic Background**: Floating particle effect that adds depth and interactivity to the entire site.
- **Dark Mode**: Toggle between light and dark themes for comfortable viewing.
- **Responsive Design**: Looks great on devices of all sizes.
- **Easy to Extend**: Simple process for adding new button demos.
- **Documentation**: Comprehensive guides for setup, customization, and adding new demos.
## Demo Buttons
1. **Dimension Shifter**: A button that appears to break out of the 2D plane, shifting colors and reacting to user interaction in surprising ways.
2. **Neon Pulse**: A button with a pulsating neon glow effect, creating a vibrant and eye-catching design.
3. **Quantum Ripple**: Features a unique ripple effect and quantum flicker, pushing the boundaries of button design.
## Getting Started
1. Clone the repository:
```
git clone https://github.com/your-username/advanced-animation-demo-template.git
```
2. Navigate to the project directory:
```
cd advanced-animation-demo-template
```
3. Open `index.html` in your web browser to view the demos.
## Adding New Demos
1. Create new HTML, CSS, and JS files for your demo in the respective subdirectories.
2. Add a new entry to the `demos` array in `config.json`.
3. Refresh the page to see your new demo in action.
For detailed instructions, see `docs/adding-new-demos.md`.
## Customization
- Global styles can be modified in `css/global.css`
- To change the layout, edit `index.html` and `js/demo-loader.js`
- Modify the particle effect in `js/particles.js`
- For advanced customizations, refer to individual demo files in `components/button-demos/`, `css/button-styles/`, and `js/button-scripts/`
See `docs/customization.md` for more detailed customization options.
## Technologies Used
- HTML5
- CSS3 (with advanced animations and transitions)
- JavaScript (ES6+)
- Canvas API (for particle effects)
## Browser Support
This template works best in modern browsers that support the latest CSS and JavaScript features. For optimal experience, use the latest versions of Chrome, Firefox, Safari, or Edge.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
- Inspired by cutting-edge web design trends and creative coding techniques
- Special thanks to the open-source community for continuous inspiration and support
Enjoy creating mind-blowing button animations and effects!