Portfolio Microinteractions
Genshin Zodiac
Create a website dedicated to the zodiac to learn your zodiac
Final Build - Information
Trigger
- Page Loads
- Hover On and Off card
- Click preview button
- Pop-out Yes/Cancel preview
- Hover On and Off Cancel button
- Hover On and Off Yes button
- Click Cancel button
- Click Yes button
Loops and Modes
- Hover up with the additional Information
- Glow Light infinite circle around square
- On touch preview button will have infinite rainbow glowing light
- Pop out with the additional Information
- Yes button infinite rainbow glowing light
Feedback
- Touch the preview button and cursor changes from default to pointer
- Touch the Yes/Cancel button and cursor changes from default to pointer
- Gold background 50% transparency moves from bottom to top
- Gold background, there's text and a button
- Text and icon inward from the bottom
- Touching the image will cause it to automatically zoom in
- Offing the hover effect will have the reverse effect
- Glowing effect activate on hover overs the preview button.
- Gold glow light circle around the square
- Gold glow light rotate clockwise direction
- On hovering, glow light disappears
- Touch the preview button, glowing effect appear
- Touch Cancel button, button will rise while Yes button down
- Touch Yes button, button will rise while Cancel button down
- Touch Cancel/Yes button, heart beat animation effect appear
- Pop out in Ease-in on the screen
- Pop out slide down on to the screen
- Yes button auto activate rainbow glowing color
- Cancel button permanent gradient red color
- Touch yes button, rainbow color change to permanent gradient green
- Off touch yes button, gradient green return to rainbow glowing color
- Touch yes/cancel button, heart beat animation appear
- Click the yes button direct to the page
- Click the cancel button to close the notification
Rules
- Touch the preview button and cursor changes from default to pointer
- Touch the Yes/Cancel button and cursor changes from default to pointer
- Gold background 50% transparency moves from bottom to top
- Gold background, there's text and a button
- Text and icon inward from the bottom
- Touching the image will cause it to automatically zoom in
- Offing the hover effect will have the reverse effect
- Glowing effect activate on hover overs the preview button.
- Gold glow light circle around the square
- Gold glow light rotate clockwise direction
- On hovering, glow light disappears
- Touch the preview button, glowing effect appear
- Touch Cancel button, button will rise while Yes button down
- Touch Yes button, button will rise while Cancel button down
- Touch Cancel/Yes button, heart beat animation effect appear
- Pop out in Ease-in on the screen
- Pop out slide down on to the screen
- Yes button auto activate rainbow glowing color
- Cancel button permanent gradient red color
- Touch yes button, rainbow color change to permanent gradient green
- Off touch yes button, gradient green return to rainbow glowing color
- Touch yes/cancel button, heart beat animation appear
- Click the yes button direct to the page
- Click the cancel button to close the notification