Fitness clubs group website design

Animated design Wordpress website for a Fitness club

O2 Fitness

Embarking on a collaboration with a newly established fitness club in Bangkok, our team undertook the challenge of creating a website that embodies the club's ethos of movement and breath. The result is a visually dynamic online platform that seamlessly integrates animations to convey the essence of the fitness experience.

Ensuring accessibility for a diverse audience, the website is fully responsive across various devices and is presented in both English and Thai languages. Join us as we explore the nuances of this project, where design innovation meets functionality to create a digital space reflective of a dynamic fitness community. 

1 Project Manager
1 Web Designer
1 Web Developer
Adobe Photoshop
PHP, WordPress, HTML5, CSS
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.

How about some creative animations for your new website?

Get in touch with the Outsourcify team

Have a project in mind?
Let's start your project today

Contact Us
Have a project in mind?
Let's start your project today