https://github.com/short-zed/web3task
An interactive web animation featuring a dynamic gradient effect triggered by a button click. The gradient smoothly expands, and the button text updates in real time. Built using HTML, CSS, and JavaScript, this project delivers a visually appealing and responsive design. 🚀
https://github.com/short-zed/web3task
apple apple-gradients css gradients html javascript
Last synced: 7 months ago
JSON representation
An interactive web animation featuring a dynamic gradient effect triggered by a button click. The gradient smoothly expands, and the button text updates in real time. Built using HTML, CSS, and JavaScript, this project delivers a visually appealing and responsive design. 🚀
- Host: GitHub
- URL: https://github.com/short-zed/web3task
- Owner: Short-Zed
- Created: 2025-03-22T19:59:02.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-22T20:11:20.000Z (7 months ago)
- Last Synced: 2025-03-22T21:19:30.175Z (7 months ago)
- Topics: apple, apple-gradients, css, gradients, html, javascript
- Language: CSS
- Homepage: https://short-zed.github.io/Web3Task/
- Size: 75.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Apple Intelligence Animated Gradient
An interactive web animation showcasing an animated gradient effect triggered by a button click. The gradient expands when clicked, and the button text updates dynamically.
## 🚀 Live Demo
Check out the live version: [Apple Intelligence Gradient](https://short-zed.github.io/Web3Task/)
## 📸 Preview
 *(Replace with an actual screenshot)*
## 🔹 Features
- **Animated Gradient**: A visually appealing gradient expands on button click.
- **Dynamic Button Text**: Button text toggles between "Click Me" and "Bye!!".
- **Smooth Transitions**: CSS animations for a seamless user experience.
- **Responsive Design**: Works across various screen sizes.
## 📂 Folder Structure
```
📁 Apple-Intelligence-Gradient
│-- 📂 assets (Contains images, icons, etc.)
│-- 📂 css (Contains index.css)
│-- 📂 js (Contains index.js)
│-- index.html (Main HTML file)
│-- README.md (Project Documentation)
```
## 🛠️ Technologies Used
- **HTML5**: Page structure
- **CSS3**: Styling & animations
- **JavaScript**: Dynamic interactions
## 📜 Code Overview
### 🖼 HTML Structure (index.html)
```html
Click Me
```
### 🎨 CSS Styling (index.css)
```css
.intelligence_gradient_container > span {
background-image: linear-gradient(90deg, #89aaf8, #b770fc, #d24dc3, #e85560, #ee7b6b);
background-size: 0% 0%;
transition: all 1.2s ease-in-out;
}
```
### 🎬 JavaScript Functionality (index.js)
```js
run_btn.addEventListener("click", (event) => {
if (trigger) {
gradient_line.style.backgroundSize = "100% 20%";
event.target.innerText = "Bye!!";
trigger = false;
} else {
gradient_line.style.backgroundSize = "100% 0%";
event.target.innerText = "Click Me";
trigger = true;
}
});
```
## 📌 Setup & Usage
1. Clone the repository:
```bash
git clone https://github.com/Short-Zed/Web3Task.git
```
2. Open `index.html` in a browser.
3. Click the button to see the animation in action!
## 📜 License
This project is open-source and available under the **MIT License**.
## 📞 Contact
For suggestions or issues, feel free to reach out via [GitHub Issues](https://github.com/Short-Zed/Web3Task/issues).