CHARDON FX / ÉTUDE VISUELLE
Une image,
tout l’écran.
Faites défiler pour ouvrir l’image ↓

06 / Ouverture · CSS 3D · scroll natif
Image plein écran
Une image qui s’ouvre comme une porte.
Inclinée en perspective, l’image se redresse et s’agrandit jusqu’à occuper tout l’écran au fil du défilement.
Où l’utiliser
Hôtels, immobilier, restaurants, mode : ouvrir sur la photo qui résume le lieu.
Notre regard
Une seule image forte suffit. À placer juste après l’accueil, pour faire entrer le visiteur dans l’univers.
À essayer
Faites défiler la page : l’image se redresse, puis occupe tout l’écran.
Une lecture adaptée
En mouvement réduit, l’image s’affiche directement en plein écran.
Étude visuelle de démonstration. Images générées pour le Lab.
Base d’intégration
<section data-fx="tilt-reveal" data-length="2.4" data-tilt="26">
<figure><img src="lieu.webp" alt="Description"><figcaption>Légende</figcaption></figure>
</section>Utiliser ensemble chardon-fx.css et chardon-fx.js. Adapter les médias et les couleurs au projet, puis vérifier sur les appareils cibles.