Efecto del zoom « Ken Burns » en los encabezados de pantalla completa y diapositivas Divi

L'effet "Ken Burns" est un effet bien connu, simple et efficace pour donner une impression de mouvement à des images statiques. Dans cet article, je vous explique comment ajouter simplement ces effets sur vos En-tête plein écran ou vos diaporamas Divi avec quelques lignes de CSS.

1 - Qu'est-ce que l'effet "Ken Burns" ?

El "Ken Burns Effect" est une technique d'animation utilisée principalement dans le montage vidéo et les diaporamas d’images. Elle consiste à appliquer un mouvement de caméra simulé sur une image fixe, en combinant un zoom avant/arrière et un panoramique (déplacement latéral ou vertical).

Este término viene del artista documental americano Ken Burns, qui a largement popularisé cette technique dans ses films historiques, notamment pour donner de la dynamique aux photographies d'archives.

Estos efectos pueden utilizarse en:

• Documental : dar vida a las fotos históricas.
• Slideshows : hacer presentaciones más atractivas.
• Montajes de vídeo Software como iMovie, Final Cut Pro, Premiere Pro, etc. generalmente ofrecen estos efectos de Ken Burns.

C'est un effet simple mais efficace pour capter l'attention du spectateur et donner une impression de mouvement à des images statiques.

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

2 - Créer l'effet Ken Burns avec quelques lignes de CSS

On va créer 6 classes CSS que l'on pourra ensuite appliquer à certains modules Divi. Ajoutez le code suivant dans l'onglet Apparence > Personnaliser > CSS additionnel :

.kb-zoomout .et_pb_slide .et_parallax_bg,
.kb-zoomout .et_parallax_bg {
  animation: zoomout 7s forwards;
}

.kb-zoomin .et_pb_slide .et_parallax_bg,
.kb-zoomin .et_parallax_bg {
  animation: zoomin 7s forwards;
}

.kb-zoomin-right .et_pb_slide .et_parallax_bg,
.kb-zoomin-right .et_parallax_bg {
  animation: zoomin-right 7s forwards;
}

.kb-zoomout-right .et_pb_slide .et_parallax_bg,
.kb-zoomout-right .et_parallax_bg {
  animation: zoomout-right 7s forwards;
}

.kb-zoomin-left .et_pb_slide .et_parallax_bg,
.kb-zoomin-left .et_parallax_bg {
  animation: zoomin-left 7s forwards;
}

.kb-zoomout-left .et_pb_slide .et_parallax_bg,
.kb-zoomout-left .et_parallax_bg {
  animation: zoomout-left 7s forwards;
}

@keyframes zoomout {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomout-right {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin-right {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
  }
}

@keyframes zoomout-left {
  0% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(150px, -20px, 0px);
  }
  100% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
}

@keyframes zoomin-left {
  0% {
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
  }
  100% {
    transform: scale3d(1.5, 1.5, 1.5) translate3d(150px, -20px, 0px);
  }
}

Aquí están algunas explicaciones:

1. .kb-zoomin : Zoom avant (agrandissement). Animation : l'élément commence à 1.1x sa taille normale et grandit progressivement jusqu'à 1.5x.
2. .kb-zoomout : Zoom arrière (réduction). Animation : l'élément commence à 1.5x sa taille et revient progressivement à 1.1x.
3. .kb-zoomin-right : Zoom avant avec déplacement vers la droite. Animation : l'élément grandit tout en se déplaçant vers la droite (-150px en X).
4. .kb-zoomout-right : Zoom arrière avec déplacement vers la droite. Animation : l'élément rétrécit tout en se déplaçant vers la droite (-150px en X).
5. .kb-zoomin-left : Zoom avant avec déplacement vers la gauche. Animation : l'élément grandit tout en se déplaçant vers la gauche (+150px en X).
6. .kb-zoomout-left : Zoom arrière avec déplacement vers la gauche. Animation : l'élément rétrécit tout en se déplaçant vers la gauche (+150px en X).

Como recordatorio: Así es como añadir código a Divi.

3 - Ajouter un effet Ken Burns sur un module "Entête plein écran"

Une fois le CSS ajouté dans votre site, il sera très simple d'ajouter l'effet sur une entête plein écran par exemple. Pour cela, ajoutez dans votre page une section Plein écran (section violette), puis ajoutez dans cette section un module Header Full Screen.

1. Depuis l'onglet Contenu du module Entête Plein Ecran, ajoutez une image de fond. Activez l'option Parallaxe + Méthode CSS.
2. Ensuite, à l'onglet Style > Modèle : passez l'image en mode plein écran.
3. Enfin, à l'onglet Avancé, ajoutez l'une des 6 classes CSS créées précédemment.

¡Ahí tienes! ¡Tu imagen parece animada!

4 - Ajouter l'effet Ken Burns sur un "Curseur de défilement plein écran" (diapo)

El código CSS añadido anteriormente también funciona en el módulo Persiana de pantalla completa. Usted procederá de la misma manera:

1. Agregue una sección de pantalla completa (sección violenta) y elija el módulo Fullscreen Scroll Curder.
2. Ajoutez vos diapositives sans oublier de mettre, pour chacune d'entre elles, une image de fond avec l'effet parallaxe + CSS.
3. À l'onglet Avancé, ajoutez l'une des 6 classes CSS créées précédemment.

Et voilà le résultat : à chaque changement de diapositive, l'effet sera activé !

5 - En conclusion : un effet zoom facile et simple mais un peu limité...

Si vous avez testé ce tutoriel, vous vous êtes rendu compte qu'il n'était pas difficile d'ajouter une effet Ken Burns sur certaines images. Je trouve l'effet réussi et facile à implémenter.

Toutefois, vous aurez peut-être remarqué qu'il y a quelques limitations, notamment le fait que cette animation ne s'active qu'une fois au chargement de la page. Ce n'est pas gênant pour une entête plein écran situé tout en début de mise en page, mais si vous mettez ce module en fin de page, il ne sera jamais vu...

Il faudrait donc adapter le code avec du Javascript pour que l'animation ne soit jouée que lorsque l'élément entre dans l'écran... N'hésitez pas à demander de l'aide à ChatGPT, par exemple, pour y parvenir...

Quant au Curseur de défilement, l'animation se jour à chaque changement de diapositives, donc ce n'est pas un problème !

Aussi, vous trouverez sur le site d'ElegantThemes un autre tutoriel pour ajouter des effets Ken Burns directement sur les modules images, les lignes et les sections.

Dime en el comentario si te gusta este efecto Ken Burns!