Projet personnel

Horloge Créative

Les chiffres défilent sur les aiguilles

JavaScriptCSS3HTML5GitHub Pages
2024

Le projet en détail

L'Horloge Créative est née d'une idée simple mais techniquement complexe : afficher les chiffres de l'heure directement SUR les aiguilles plutôt qu'autour du cadran. Chaque aiguille affiche plusieurs instances du chiffre correspondant (heures, minutes ou secondes) qui défilent le long de l'aiguille, créant un effet visuel unique et hypnotisant. Le projet propose trois thèmes visuels distincts : Digital avec effets néon cyan et animations pulsantes, Romain avec chiffres romains dorés lumineux autour du cadran, et Moderne avec dégradés dorés animés. Chaque thème transforme complètement l'expérience visuelle tout en conservant le concept innovant des chiffres sur les aiguilles. Le défi technique principal était de calculer précisément la position et la rotation de chaque chiffre pour qu'ils restent lisibles quelle que soit l'orientation de l'aiguille. L'utilisation de variables CSS et de media queries garantit une expérience parfaite sur tous les appareils.

Aperçu du projet

Screenshot 1 de Horloge Créative
Agrandir
1 / 3
Screenshot 2 de Horloge Créative
Agrandir
2 / 3
Screenshot 3 de Horloge Créative
Agrandir
3 / 3

Défis relevés

  • Calculs trigonométriques pour positionner les chiffres sur les aiguilles
  • Rotation inverse des chiffres pour maintenir leur lisibilité
  • Adaptation responsive complexe avec variables CSS
  • Animations fluides sans impact sur les performances
  • Synchronisation parfaite avec l'heure système

Compétences acquises

  • Manipulation avancée du DOM avec JavaScript vanilla
  • Transformations CSS 3D et calculs de rotation
  • Design responsive avec CSS custom properties
  • Optimisation des animations pour 60 FPS
  • Architecture modulaire sans framework

Stack technique complète

Langages

HTML5
CSS3 (animations, transforms, variables CSS)
JavaScript vanilla ES6

Outils & Services

Media Queries (responsive design)
CSS Grid & Flexbox
Git
GitHub Pages

Déploiement

GitHub Pages