TIGI - Hair Reborn
Producing a parallax website without blowing the performance budget
- Semantic HTML
- Responsive CSS
- Parallax Animation
Ian has done a fantastic job overall. Not only the site is to design, the code is very clean and slick. Love the way he achieved the translations portion of the site.
Kalwinder Dohil, IT Manager at TIGI International
The TIGI International team and I implemented a parallax effect to make a user's time on the site very much a unique experience, one that represented the product range.
Aside from this parallax effect, I integrated a slider that allows each section of the site to move left and right, displaying more content about each product. The slider is automatically scrolled to when a user clicks on a link for a particular slide and although the site consists of only one page, each slide has a unique URL, making it possible to link to any slide internally or externally. As a user moves between slides on the page, their history is recorded by the browser allowing use of the back button, much like a multi page web site. This slider was also utilised for the "consultation" section of the site, in which a user can answer questions about their hair type, leading them to the most suitable product for them. The slider was modified to prevent advancing to the next slide until a question was answered.
I also developed the "Product Overview" -- allowing the user to see all of the products within the TIGI range, the navigation, as well as what we termed the "sticky" sections -- when a section automatically animates to its vertical centre so it best fits the users screen.
Ian Lunn is a Front-end Developer with 12 years commercial experience, author of CSS3 Foundations, and graduate of Internet Technology. He creates successful websites that are fast, easy to use, and built with best practices.