O2 Fitness

An animated design Wordpress website for a Fitness club

O2 Fitness

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.
home
o2design

How about some creative animations for your new website?

Get in touch with the Outsourcify team

Related blog articles