https://github.com/tononjacopo/waves
Nice waves animation with only CSS!
https://github.com/tononjacopo/waves
css-animations landing-page waves
Last synced: about 1 year ago
JSON representation
Nice waves animation with only CSS!
- Host: GitHub
- URL: https://github.com/tononjacopo/waves
- Owner: tononjacopo
- License: mit
- Created: 2025-03-30T20:34:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-30T20:35:23.000Z (about 1 year ago)
- Last Synced: 2025-03-30T21:27:47.374Z (about 1 year ago)
- Topics: css-animations, landing-page, waves
- Language: CSS
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌊 Waves Animation
[](https://github.com/tononjacopo/waves/actions)
[](LICENSE)
[](https://github.com/tononjacopo/waves/releases)
A captivating waves animation implemented purely with CSS, ideal for enhancing landing pages or sections of your website with a dynamic, fluid effect.
## 🌐 Live Demo
Experience the animation in action here: [Waves Animation Demo](https://www.tononjacopo.com/waves/)
## 🔥 Features
- ✅ **Pure CSS Implementation** – Achieves the wave effect without relying on JavaScript, ensuring lightweight performance. 🌐
- ✅ **Customizable Parameters** – Easily adjust wave height, speed, and color to align with your site's design aesthetics. 🎨
- ✅ **Responsive Design** – Maintains visual appeal and functionality across various device sizes, from mobile phones to desktops. 📱💻
- ✅ **Seamless Integration** – Simple to incorporate into existing projects with minimal code adjustments. 🔄
## 📸 Screenshot
*Visual representation of the waves animation effect in a webpage setting.*
## 🗁 Project Structure
```plaintext
🌊 waves-animation
├── 📝 index.html # HTML file demonstrating the wave animation
├── 🎨 style.css # CSS file containing styles for the animation
├── 🖼️ media/ # Directory for images and media assets
│ └── waves_animation.png # Screenshot of the animation
└── 📄 LICENSE # MIT License file
```
## 🛠️ Technologies Used
- 🎨 **CSS3** – Utilized for crafting the wave animation through keyframes and transitions.
- 🖥️ **HTML5** – Provides the structural foundation for the demonstration page.
## 🚀 Installation
To incorporate this animation into your project, follow these steps:
1. **Clone the repository**
```bash
git clone https://github.com/tononjacopo/waves.git
```
2. **Navigate to the project directory**
```bash
cd waves
```
3. **Integrate the animation into your project**
- Copy the `style.css` file into your project's CSS directory.
- Link the CSS file in your HTML where you wish to display the animation.
- Customize the CSS properties as needed to fit your design requirements.
## 📩 Contact
- [🌐 Portfolio](https://tononjacopo.com)
- [🔗 LinkedIn](https://it.linkedin.com/in/tononjacopo)
- [💡 LeetCode](https://leetcode.com/tononjacopo)
- [❌ X](https://x.com/devtononjacopo)
- [🎨 Dribbble](https://dribbble.com/tononjacopo)
📩 **Email**: [info@tononjacopo.com](mailto:info@tononjacopo.com)
## 📝 License
This project is distributed under the **MIT** license. You are free to use, modify, and distribute it! 🚀
---
**🔗 [Check out the Demo](https://www.tononjacopo.com/waves/) and leave a ⭐ on GitHub if you like it!** 😊✨