A visually stunning intro animation that utilizes a GIF-based ink mask to create an engaging and modern design. The project demonstrates the use of CSS masking, JavaScript, and localStorage for replayable animations. It also includes a modernized redo button for user interactivity.
- GIF-Based Mask Animation: Displays an ink-style reveal effect on the page's banner.
- Replay Animation: A "Redo Animation" button allows users to replay the intro animation without refreshing the browser.
- Modern Design: The button features a sleek, gradient background with hover and active effects for an enhanced user experience.
- Load the Page: When the page loads for the first time, the ink animation plays automatically.
- Replay the Animation:
- Click the "Redo Animation" button at the bottom of the screen.
- This will reset the animation and replay the ink effect.
- Reset on Refresh: After the animation plays, it will not replay upon refreshing the page unless the "Redo Animation" button is clicked.
The "Redo Animation" button has been updated to a modern style:
- Gradient background for a sleek appearance.
- Subtle hover effect with scaling and color changes.
- Active press effect for a tactile feel.