A dynamic and interactive visualization tool designed to celebrate every sale made on an e-commerce platform. Each sale triggers a bubble animation containing the product image, rising from the bottom to the top of the screen.
- Real-time Animation: Bubbles appear in real-time as sales occur.
- Responsive: Narrow visualization container ensures that the bubbles are visible and impactful on all screen sizes.
- Randomized Movement: Each bubble not only rises but also has a subtle randomized X-axis movement, ensuring a natural and organic feel.
- The project utilizes vanilla JavaScript to simulate sales and trigger the bubble animations.
- CSS3 animations power the bubbles' rise and lateral movement.
- The project can be integrated with real-time sales data using WebSockets or AJAX polling to fetch sales data and trigger animations accordingly.
- Clone this repository:
- Open
index.html
in a browser to view the simulation. - Integrate with your e-commerce platform to trigger the
onSale(productImageUrl)
JavaScript function with a product image URL each time a sale occurs.
Feel free to fork, improve, and submit pull requests. For major changes or feature additions, please open an issue first to discuss.
MIT License. See LICENSE
for more information.