Effet zoom « Ken Burns » sur les entêtes plein écran et les diapos 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 » ?

Le « 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).

Ce terme vient du documentariste américain Ken Burns, qui a largement popularisé cette technique dans ses films historiques, notamment pour donner de la dynamique aux photographies d’archives.

On peut utiliser ces effets dans :

• Des documentaires : pour donner de la vie à des photos historiques.
• Des diaporamas : pour rendre les présentations plus attrayantes.
• Des montages vidéo : des logiciels comme iMovie, Final Cut Pro, Premiere Pro, etc. proposent généralement ces effets Ken Burns.

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

Le saviez-vous ? Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE »

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);
  }
}

Voici quelques explications :

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).

Pour rappel : voici comment ajouter du Code dans 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 Entête Plein Ecran.

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.

Et voilà ! Votre image semble animée !

4 – Ajouter l’effet Ken Burns sur un « Curseur de défilement plein écran » (diapo)

Le code CSS ajouté précédemment fonctionne également sur le module Curseur de défilement plein écran. Vous procèderez de la même manière :

1. Ajoutez une section plein écran (section violette) et choisissez le module Curseur de défilement plein écran.
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.

Dites-moi en commentaire si vous aimez cet effet Ken Burns !