Le principe de ce projet est d’afficher l’image dont l’horaire déclaré est le plus proche de l’heure parmi une collection d’images représentant différents moments de la journée.
L’heure tourne en temps réel et peut être décalée par pas de 1h via deux boutons, ce qui fait basculer automatiquement vers l’image la plus pertinente pour cet horaire. C’est un petit exercice de code que je voulais refaire dans l’idée paradoxale de créer une fenêtre sur l’extérieur dans une fenêtre d’ordinateur…
Projet et article mis à jour en 2025
Une sorte d’horloge sans aiguille?
Comment ça marche
- Déclaration des images
- Chaque image est un bloc HTML unique contenant:
- Un attribut data-time au format HH:MM.
- Un attribut data-title pour l’intitulé affiché.
- Un img avec l’URL de la photo.
- Il suffit d’ajouter un bloc pour ajouter une image au rendu.
- Au chargement, le script scanne les blocs .photo, lit title/time/url, puis trie la liste par horaire croissant.
- L’heure affichée = heure système + offset (offset modifié par les boutons +1h/−1h).
- L’horloge s’actualise chaque seconde; l’offset se cumule tant que nécessaire.
- Chaque image est un bloc HTML unique contenant:
- Sélectionne l’image “la plus proche”
- Convertir l’heure affichée HH:MM en minutes: h*60 + m.
- Pour chaque image, convertir data-time en minutes.
- Calculer la distance circulaire sur 24h:
- d = min(|a−b|, 1440 − |a−b|)
- Garder et affiche l’image avec la distance minimale en temps de l’heure actuel.
- Puis si elle diffère de l’actuelle, lancer un fondu entre les deux calques img pour toujorusa voir la dernière fenetre par rapport à votre heure.
Ce projet est une update d’un code similaire que j’avais commencé à faire en juillet 2023
codepen.io/quentindigital/full/zYMMdwj
Voir le projet Fenêtre d’horaires en entier : quentinrenaux.com/xp/time/timechange-v1
Alors, il est quelle heure ? va voir ici
Regarder l’extérieur à travers la fenêtre de l’ordinateur, c’est accepter que le temps laisse sa trace jusque dans l’interface: une lueur plus froide au petit matin, une chaleur diffuse en fin d’après-midi, un bleu profond quand la journée décroche.
Cette page ne fait qu’une chose simple: elle écoute l’heure et choisit l’image qui s’en approche le plus, comme un clin d’œil entre le dedans et le dehors. Avancer ou reculer d’une heure, c’est déplacer le regard d’un cran: on sent l’ambiance changer, et le temps reprendre sa place dans l’écran. C’est minimal, mais suffisant pour se souvenir que le web peut aussi respirer avec le jour.
Projet et article mis à jour en 2025 pour joli et explicatif,
la prochain étape est d’ajouter plus de photos aux projets pour que ca change vraiment toutes les 10 minutes
voir d’autres projets : web experiment
