Parallax Animation Site
Description
In this project, I developed a Parallax Animation website to demonstrate my ability to design a visually engaging e-commerce experience using the jQuery Parallor plugin. In addition to front-end interaction design, I incorporated search engine optimization principles by structuring HTML meta tags to improve visibility and performance. The project reflects my approach to combining motion design, branding, and technical implementation within a cohesive digital product.
Languages & Libraries & Skills:
jQuery, HTML, CSS, Illustration, Photoshop, SEO.
#jQuery #HTML #CSS #SEO #branding #ecommerce #blend
In Depth
Developing Process:
Throughout the project, I built a clothing brand from the ground up, including its narrative, visual identity, product line, and website design. My concept was centered around a skateboard brand inspired by street culture and urban environments.
I designed the brand by illustrating the city skylines of Toronto and Taipei using Adobe Illustrator. These visuals became the foundation for the product designs, which I applied across skateboards as well as extended merchandise such as wheels, hoodies, and hats. The logo system was also adapted consistently across all product applications to maintain a unified brand identity.
Interface Colour Scheme Development:
I named the brand “I.F.T,” drawing inspiration from themes of national identity and my personal experience studying and living in Canada.
The website is designed as a single-page interface, allowing users to navigate through content in a continuous vertical flow. As users scroll from top to bottom, parallax animations are triggered progressively, creating depth and enhancing the storytelling experience. The colour scheme and visual language are aligned with the brand’s urban and street-inspired aesthetic, supporting both the interactive elements and overall user engagement.
Gallery
