Create and design your Fitness club website

This brand new fitness club in Bangkok required an original design with animations that reflect the sense of movement and breathing they want to inspire. The website is fully responsive and translated in 2 languages, English and Thai.

Team

1 Project Manager
1 Web Designer
1 Web Developer

Methodology

Waterfall

Tools

InVision
Adobe Photoshop
TeamWork

Technologies

PHP, WordPress, HTML5, CSS

Timeframe

12 weeks

Fresh animations for a dynamic website

For a fitness club website, especially one who’s name relates to oxygen, we felt like incorporating impressive animations to give a lively and energetic feeling to the website, following the already colourful design using a flashy color palette. All animations were created with a mix of CSS transitions and transformations and Javascript code.

The homepage of the website is made of slides that are actioned with the mouse wheel, each launching some animations on its elements, banner, title, button.

Oxygen bubbles effect: when opening the website you are greeted with oxygen bubbles coming up from the bottom of the screen, they are randomly generated with Javascript and drawn with CSS.
Circle animation inner menu: the main elements of the menu appear in a circular animations to attract the visitor’s eye and convince him to
Parallax effect on banners
Popping round titles
Popping buttons and popups
Drawer animated menu: the menu slides in from the right on click on the “hamburger” menu, a technique usually used for mobile design but that is more frequently applied on the desktop versions also nowadays.