Création de galerie interactive HTML pour Nouralu Agencement
Création de galerie HTML interactive pour Nouralu Agencement
Dans le cadre de ma collaboration avec Nouralu Agencement, entreprise spécialisée dans l’agencement et la menuiserie aluminium sur-mesure, j’ai développé deux galeries HTML photos interactives optimisées pour présenter leurs réalisations sur leur site web WordPress.
📋 Problématique
💡 Solutions développées
Galerie HTML 1
Page d’accueil – Dernières réalisations
Une galerie compacte de 6 réalisations phares pour capter immédiatement l’attention des visiteurs.
Caractéristiques techniques :
✨ 🧩 Grid responsive adaptative
→ Auto-fit avec minmax(250px) pour un affichage fluide sur tous les écrans
🔍 🖼️ Lightbox GLightbox
→ Navigation plein écran immersive pour les visuels
🎬 ⚡ Animations en cascade
→ Apparition progressive grâce à l’Intersection Observer API
🎯 🖱️ Effets hover avancés
→ Zoom image + overlay descriptif au survol
🌗 🎨 Fond premium dégradé
→ linear-gradient(#121212 → #6E6E6E) pour un rendu élégant
🚀 🔘 2 CTA stratégiques
→ Boutons différenciés avec gradients pour maximiser les conversions
✨ Découvrez les réalisations de Nouralu Agencement ✨
Explorez mes projets d’agencement sur-mesure : dressings, placards, portes et rangements conçus pour allier style et fonctionnalité 🏡✨
Galeries HTML 2
Page Produits – Catalogue complet
Une galerie exhaustive de 25 réalisations organisée pour faciliter l’exploration.
Caractéristiques techniques :
📐 Architecture identique à la galerie 1 pour garantir une cohérence UX
⏱️ Système de délais progressifs (0s à 1.2s) pour des animations fluides et naturelles
⚡ Optimisation des performances avec will-change et courbes cubic-bezier personnalisées
✨ Effets hover améliorés avec double ombrage et augmentation de luminosité
🎯 Icônes emoji intégrées pour une catégorisation visuelle rapide et intuitive
✨ Découvrez tous les produits de Nouralu Agencement ✨
Parcourez ma gamme d’agencements sur-mesure : dressings, placards, portes, armoires et meubles — conçus pour allier esthétisme et fonctionnalité 🏡✨
🛠️ Technologies & optimisations
Framework & librairies
🧱 HTML5 sémantique pour une structure propre et optimisée
🎨 CSS3 avancé : Grid, Flexbox, Transforms, Transitions
⚡ JavaScript vanilla pour des interactions légères et rapides
🖼️ GLightbox 3.2.0 pour une lightbox performante (CDN Cloudflare)
✓ Intersection Observer API : chargement différé des animations
✓ Transition-delay progressif : animation en cascade naturelle
✓ Transform GPU-accelerated : fluidité 60fps garantie
✓ Cubic-bezier personnalisé : mouvement organique
✓ Will-change property : optimisation navigateur
✓ Responsive breakpoint @768px : adaptation mobile
Animations & interactions
🌫️ Fade-in au scroll
Apparition progressive : opacité de 0 → 1 + déplacement vertical (20px → 0)
⬆️ Hover elevate
Légère élévation au survol : translation Y (-5px / -6px) + ombre dynamique
🔍 Zoom image au survol
Effet de mise en avant : scale (1.05) + légère augmentation de luminosité (brightness 1.02)
📄 Overlay slide-up
Apparition fluide d’un texte descriptif avec transition vers le haut
🔘 Button lift (CTA)
Bouton interactif avec effet de profondeur et élévation au survol
📊 Résultats & impact
Performance
📦 Code inline compact (~8 KB minifié)
🚀 Aucune dépendance lourde
🔗 Une seule librairie externe : GLightbox
🌍 Compatibilité maximale
🧭 Fonctionne sur tous les navigateurs (IE11+ avec fallbacks)
Expérience utilisateur
📌 Navigation intuitive
➡️ Lightbox avec contrôles clavier et tactile ⌨️📱
⚡ Feedback visuel immédiat
➡️ Animations fluides et réactives ✨🎬
♿ Accessibilité optimisée
➡️ Attributs ALT, titres descriptifs et respect des contrastes WCAG AA 🎯
Business
Ces galeries permettent à Nouralu Agencement de :
✅ Présenter professionnellement 31 réalisations au total
✅ Augmenter l’engagement visiteur avec interactions modernes
✅ Convertir prospects via CTA stratégiques (devis, produits)
✅ Se démarquer avec un design premium dans le secteur agencement
🎨 Différences entre les deux galeries
| Critère | Galerie Accueil | Galerie Produits |
|---|---|---|
| Images | 6 réalisations | 25 réalisations |
| Objectif | Vitrine premium | Catalogue exhaustif |
| Animation max | 0.5s delay | 1.2s delay |
| Hover effect | Standard | Amélioré (double shadow) |
| CTA | Produits + Devis | Linktree + Devis |
| Optimisation | Légèreté | Performance masse |
💻 Intégration Spectra
Code prêt à l’emploi pour Spectra :🧩 Widget HTML personnalisé
🎨 CSS / JS en inline (aucune dépendance externe)
👁️ Compatible avec le mode prévisualisation
⚡ Sans conflit avec le thème WordPress
🔗 Liens du projet
Site client : Site web Nouralu Agencement
Galerie 1 : Page d’accueil – Section « Dernières réalisations »
Galerie 2 : Page « Mes produits » – Catalogue complet
