18/11/2024-16/12/2024 (Week 9 - Week 13)
Siti Zara Sophia Binti Mohammad Reeza (0359881)
Bachelor of Interactive Spatial Design (Honours)
Task 3 Interactive Component Design & Development
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1Pxq8u5-hbf1ZpQBJGMCf6y_CY__P6Q7O/preview" width="640" height="480" allow="autoplay"></iframe>
In task 3, we were to actually animate our planned microinteractions and macrointeractions we planned in task 2 using HTML, CSS and JavaScript! We, Bachelor of Interactive Spatial Design students, were to animate 2 to 6 components for this project which includes (but are not limited to):
- Navigation Menu with Interactive Icons
- Side Menu Interaction
- Pop Up Boxes
- Call to Action Buttons
- Page/Screen Transitions
The below sections detail the components I have created for my app!
1. Homepage Fade In
For this, I used HTML, CSS and Javascript (GSAP) to develop and design my app's homepage in Dreamweaver. Then, I screen recorded the index file (on inspect mode) to see the microinteractions in action! Afterwards, I converted my video into a gif so it would be easily shown on this page!
The below are my HTML, CSS and Javascript codes!
HTML & Javascript:
CSS:
2. User Profile Hover + Additional Microinteractions
Again, for these microinteractions and animations, I used HTML, CSS and Javascript (GSAP) in order to create them fully! I also linked both the homepage and user profile so you can easily switch between them! Here's a full video and GIF of my user profile microinteractions (seen in browser on inspect mode). Admittedly, I did a bit extra here compared to my figma design but I believe it adds more to the user experience! The animations and microinteractions include:
- Zoom In When Hovering
- Changing Colours When Hovering
- Slide In
- Menu Sliding In From Below One By One
HTML & Javascript:
CSS:
Comments
Post a Comment