Application Design II/Final Task
29.08.2023 - 08.12.2023 / Week 1 - Week 14
Chai HongHong / 0354211
Application Design II / Bachelor of Design (Hons) in Creative Media
Final Task / Final Application
Final Task / Final Application
Splash screen
Six circular bubble charts (including the largest bubble at the bottom), position distribution is achieved through positioning
Fig.1.1. splash screen
The page loads and the bubble animation effect is realized through gsap.
The repeat attribute is the number of repetitions, which will cause the animation to be executed multiple times; if I want the animation to repeat forever, use repeat: -1. Repeat is generally used with the yoyo attribute. When yoyo is true, it will be executed at the end of each animation. reverse movement.
Fig.1.2.
Fig.1.3.
Click skip to switch to the login registration page
This is the structural code for login registration
Fig.1.4.
Login page
Click the skip it button to hide the startup page and display the login registration page.
Implemented through jquery’s hide and show methods
Fig.1.5.
Fig.1.6.
Discover page
Fig.1.7. Discover page
Implemented carousel chart function
The structure code is as follows
Fig.1.8.
The Js code is as follows (dis.js)
Switch a picture every second, setInterval(function(){
next_pic();
},1000)
The next_pic function finds the current picture by controlling index and eq(index), displays fadeIn and hides fadeOut
For carousel dot points, the style can be changed by adding the actives class (addClass("actives"))
Fig.1.9.
Bottom bar switching animation
Fig.1.10. Bottom bar
This is achieved through the display and hiding of images and the flex layout of elements. The structural code is as follows:
The bottom four elements are laid out through display: flex; and when the page is loaded, the elements in the red box are displayed.
Fig.1.11.
Fig.1.12.
Artist Search
Fig.1.13. Artist Search
In this page, the avatar is animated. The html code is as follows. The starting position of the element is controlled through positioning.
Fig.1.14.
Fig.1.15.
Fig.1.16. Player
Fig.1.17.
Fig.1.18.
Cover realizes 360-degree circular rotation, controlled by the rotation attribute in gsap, repeat: -1, realizes infinite rotation
Fig.1.19.
Fig.1.20. Lyrics
Fig.1.21.
Fig.1.22.
Final Netlify link (use iPhone 12 pro phone size to inspect):
Figma link:
REFLECTION
I learned how to use front-end libraries such as GSAP and jQuery, which helped me manipulate DOM elements and achieve animation effects more flexibly. Understanding the use of these libraries can significantly improve the efficiency of front-end development.
It is a good practice to deploy my application to Netlify and provide the link. Learning to use version control systems (such as Git) and cloud service platforms allows me to manage and share my code more efficiently. Through this assignment, I realized that front-end development is an ever-evolving field. Continuously learning new technologies, best practices and tools is key to ensuring I stay competitive. Overall, this assignment provided me with an opportunity to apply and consolidate the knowledge I learned in front-end development through a real-life project. Through constant reflection and learning, I can continuously improve my skills in this field.
Comments
Post a Comment