Smooth Ken Burns
Votre photo avance et glisse lentement dans son cadre, en boucle de 15 secondes ; le survol ou le bouton pause l'arrête, et elle reste immobile pour qui réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'animation CSS kbu-drift s'applique à l'<img class="kbu-image"> : en --kbu-duration (15 s), l'image passe par quatre cadrages (agrandie de 1 à 1,25, décalée de quelques pour cent) puis revient au départ, avec un ease-in-out qui évite les à-coups. Le cadre coupe ce qui dépasse. Aucun script ne fait bouger l'image.
Un petit bouton rond en bas à droite (.kbu-toggle) met l'animation en pause et la relance ; c'est le seul rôle du JavaScript, qui câble chaque racine à part. Le survol de l'image met aussi en pause, comme dans la version d'origine, et le badge « Auto-animating » signale le mouvement.
Le cadre s'adapte à la largeur disponible jusqu'à --kbu-width et garde --kbu-ratio. Pour un fond plein écran, posez la racine en position: absolute; inset: 0 et mettez --kbu-width: 100%.
Accessibilité
- Pause : le bouton est un vrai
<button>nommé « Mettre l'animation en pause » ;aria-pressed="true"indique que l'image est arrêtée. Un mouvement qui dure plus de cinq secondes doit pouvoir être arrêté (WCAG 2.2.2) : c'est son rôle. - Mouvement réduit : sous
prefers-reduced-motion: reduce, l'animation est retirée, l'image reste à son cadrage de départ, et le badge et le bouton disparaissent puisqu'il n'y a plus rien à arrêter. - Lecteurs d'écran : l'image garde son texte alternatif ; la légende est masquée. Le badge reste lisible : retirez-le s'il n'apporte rien dans votre page.
- Survol : la souris arrête l'image tant qu'elle est dessus ; le bouton, lui, l'arrête durablement, même quand la souris s'en va.
Compatibilité navigateur
Animation CSS, aspect-ratio et moins de 1 Ko de JavaScript pour le bouton, sans dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : deux copies dont la 2e mise en pause seule, script collé deux fois sans erreur, bouton au clavier, mouvement réduit (aucune animation), aucun débordement à 390 px.
Sans JavaScript, l'animation tourne et s'arrête au survol, mais le bouton ne fait rien : cachez-le dans ce cas. Sans aspect-ratio, le cadre prend la hauteur de l'image.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0186-root">
<div class="kbu-frame">
<img class="kbu-image" src="votre-photo.jpg" alt="Description de la photo">
<span class="kbu-label" aria-hidden="true">Ken Burns</span>
<span class="kbu-badge">Auto-animating</span>
<button type="button" class="kbu-toggle" aria-pressed="false" aria-label="Mettre l'animation en pause"></button>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Image (HTML — src de .kbu-image) |
motif violet quadrillé (SVG intégré) | Votre photo et son alt. L'image monte jusqu'à 125 % : un fichier 1,3 fois plus large que le cadre reste net. |
--kbu-duration |
15s | Durée d'un cycle complet ; 8s pour un mouvement visible, 25s pour un fond presque immobile. |
--kbu-width · --kbu-ratio · --kbu-radius |
280px · 7 / 5 · 0.75rem | Largeur maximale, proportions et arrondi du cadre. |
Cadrages (@keyframes kbu-drift) |
1 → 1,2 → 1,15 → 1,25 | Modifiez les scale() et translate() des étapes 25 %, 50 % et 75 % pour viser une autre partie de la photo. |
Badge .kbu-badge · légende .kbu-label |
« Auto-animating » · « Ken Burns » | Éléments facultatifs : supprimez les <span> sur une vraie photo. |
| Pause au survol | active | Pour un fond, ajoutez pointer-events: none au cadre et pointer-events: auto au bouton : seule la pause par le bouton reste. |
