Comment réaliser un effet Ken Burns sur une section plein écran ?

L’effet Ken Burns, c’est quoi ?

L’effet Ken Burns est un type d’effet de panoramique et de zoom utilisé dans la production de films et de vidéos à partir d’images fixes. En termes simples, l’effet Ken Burns est un effet qui donne du mouvement aux images fixes et donne vie à ces images. Très largement utilisé dans les documentaires, il donnera à votre site web une tout autre dimension.

Qu’est-ce que vous trouverez dans la vidéo ?

Dans cette vidéo, je vous explique pas à pas comment réaliser un effet Ken Burns sur une section Hero.

Enjoy😎

Classe CSS à positionner dans le module « curseur de défilement »

dfhs-1

Code CSS à positionner dans le module « code en pleine largeur »

.dfhs-1 .et_pb_slide .et_parallax_bg {

animation: dfhs-ken-burn 15s forwards;

animation-iteration-count: infinite;

}

@keyframes dfhs-ken-burn {

0% {

    transform: scale3d(1.4, 1.4, 1.4);

    animation-timing-function: linear;

}

100% {

    transform: scale3d(1, 1, 1);

}

}

</style>