Design Web pour club de fitness

Site Web Wordpress au design animé pour un club de fitness

O2 Fitness

Ce tout nouveau club de remise en forme à Bangkok nécessitait un design original avec des animationsqui reflètent le sens du mouvement et de la respiration qu'ils veulent inspirer. Le site Web estentièrement responsive et traduiten 2 langues, anglais et thaïlandais.

Team
1 Chef de projet
1 Web Designer
1 Développeur Web
Methodology
Waterfall
Tools
Invision
Adobe Photoshop
TeamWork
Technologies
PHP, WordPress, HTML5, CSS
Timeframe
12 semaines

Des animations originales pour un site web dynamique

Pour un site web de club de fitness, en particulier celui dont le nom est lié à l’oxygène, nous avons eu envie d’incorporer des animations impressionnantes pour donner un sentiment vivant et énergique au site, en suivant le design déjà coloré en utilisant une palette de couleurs flashy. Toutes les animations ont été créées avec un mélange de conversions et de transformations CSS et de code Javascript.

La page d’accueil du site est constituée de diapositives qui sont actionnées par la molette de la souris, chacune lançant des animations sur ses éléments, bannière, titre, bouton.

  • Effet bulles d’oxygène : à l’ouverture du site, vous êtes accueilli par des bulles d’oxygène qui sortent du bas de l’écran, elles sont générées au hasard avec du Javascript et représentées par du CSS.
  • Menu d’animation en cercle : les principaux éléments du menu apparaissent dans une animation circulaire pour attirer l’œil du visiteur et le convaincre à
  • Parallax effect on banners
  • faire éclater les titres
  • éclatez les boutons et les popups.
  • Menu animé en « tiroir » : le menu glisse à partir du bouton droit de la souris sur le menu « hamburger », une technique habituellement utilisée pour la conception mobile mais qui est plus fréquemment appliquée sur les versions de bureau aussi de nos jours.
home
o2design

Que diriez-vous d’animations créatives pour votre nouveau site web ?

Contactez l’équipe Outsourcify

Vous cherchez une agence web?
Discutez avec notre équipe!

Contactez-nous
Vous cherchez une agence web?
Discutez avec notre équipe!