Comment ajouter des effets de survol Ken Burns aux images, modules et lignes dans Divi

L'effet Ken Burns existe depuis un certain temps. L'effet a été rendu célèbre par le documentariste américain Ken Burns, car il a utilisé une combinaison de techniques de panoramique et de zoom pour donner vie aux images dans ses films. Dans la conception de sites Web, l'effet Ken Burns s'est avéré être une technique de conception populaire pour donner vie aux images d'arrière-plan.

L'effet Ken Burns peut également être utilisé comme effet de survol pour les images. Vous avez sûrement déjà vu cela utilisé. Dans un effort pour donner vie aux images, les concepteurs de sites Web ajoutent des effets de survol aux images qui les font zoomer, se déplacer et pivoter.

Avec la version Transformer les effets sur Divi Builder, il n'a jamais été aussi simple d'apporter des effets de survol Ken Burns à vos images. Ces options de transformation vous permettent de redimensionner (zoomer), de déplacer (ou de faire un panoramique) et de faire pivoter une image comme vous le souhaitez. Et puisque vous pouvez appliquer ces transformations à l'état de survol de l'image, les possibilités de conception sont pratiquement infinies.

Dans ce didacticiel, je vais vous montrer à quel point il est facile de créer des effets de survol ken burns complètement uniques sur des images et des lignes à l'aide de Divi Builder.

Commençons.

Aperçu

Voici un aperçu de l'effet de survol de Ken Burns qui peut facilement être réalisé avec les options de transformation de Divi.

Le concept de base expliqué

Le concept de base pour créer l'effet de survol Ken Burns consiste à utiliser les nouvelles options de transformation de Divi pour mettre à l'échelle, positionner et faire pivoter l'image lors du survol de cette image. Vous pouvez augmenter la propriété de transformation d'échelle d'un certain pourcentage pour agrandir l'image au survol. Vous pouvez utiliser la propriété translate transform pour déplacer l'image le long des axes x et y. Et vous pouvez faire pivoter l'image à l'aide de la propriété de transformation de rotation en définissant une valeur de degré spécifique (dans ce cas, la valeur de degré pour la rotation sur l'axe x). Enfin, vous pouvez contrôler la durée de transition (vitesse) et la courbe de vitesse pour contrôler la vitesse à laquelle un flux de l'effet de survol ken burns. Les trois propriétés de transformation et les propriétés de transition fonctionnent ensemble pour créer un effet de survol Ken Burns qui donne vie à vos photos.

Vous pouvez facilement affiner les propriétés de transformation et les propriétés de transition à l'aide des paramètres intégrés fournis par Divi. Cependant, la clé pour faire fonctionner cet effet implique une simple ligne de css (overflow:hidden) qui doit être appliquée à la colonne contenant votre image. Puisque vous allez mettre à l'échelle, déplacer et faire pivoter l'image, vous voulez que le débordement de l'image soit masqué en dehors de la colonne qui la contient.

Une fois que vous avez l'idée de base et la fonctionnalité en place, il est remarquable de constater à quel point il est facile de positionner l'image exactement comme vous le souhaitez à l'aide des options de transformation de Divi.

Téléchargez les exemples d'effets de survol Ken Burns GRATUITEMENT

Pour mettre la main sur les exemples gratuits d'effets de survol Ken Burns, vous devez d'abord les télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Une fois que vous avez téléchargé le fichier zip, décompressez le dossier. Ensuite, importez la mise en page .json à l'aide de la fonctionnalité de portabilité de Divi Builder. Ou vous pouvez simplement faire glisser le fichier dans Divi Builder à l'aide de la fonctionnalité Drag and Drop de Divi. C'est ça!

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commencer avec une nouvelle page

La première chose à faire est de créer une nouvelle page. Donnez ensuite un titre à votre page et déployez le Divi Builder sur le front-end. Ensuite, choisissez l'option "Construire à partir de zéro".

Ajout de l'effet Ken Burns à une image dans une ligne à une colonne

Pour ce premier exemple de base, je vais vous montrer comment ajouter l'effet de survol ken burns à une seule image dans une ligne de colonne. J'utiliserai les options de mise à l'échelle, de translation et de rotation pour obtenir cet effet.

Tout d'abord, créez une nouvelle section avec une ligne à une colonne. Ajoutez ensuite un module d'image à la ligne.

Cacher le débordement de la colonne

Avant de commencer à mettre à jour les paramètres de l'image, ouvrez les paramètres de ligne et cliquez sur l'onglet Avancé. Ajoutez ensuite le CSS personnalisé suivant à l'élément principal de la colonne :

overflow: hidden;

Cela empêchera l'image de s'étendre (ou de déborder) au-delà du conteneur de la colonne chaque fois que l'image sera agrandie au survol. Si vous ne l'ajoutez pas, l'image sortira du conteneur et masquera d'autres éléments de la page. Techniquement, vous pouvez ajouter ce css à l'élément principal de la ligne au lieu de la colonne, mais vous devrez également vous débarrasser de tout remplissage de ligne personnalisé.

Enregistrez les paramètres de ligne.

Ajout de votre image

Nous pouvons maintenant ajouter une image au module image. Ouvrez les paramètres du module d'image et ajoutez une image.

Assurez-vous que l'image est considérablement plus grande que la colonne. Ceci est important pour que l'image ne paraisse pas floue lorsque vous redimensionnez l'image à une taille plus grande au survol. Si vous utilisez les paramètres par défaut d'une ligne à une colonne, la largeur maximale de la colonne sera de 1080px. J'utilise donc une image d'environ 1500px de largeur et 900px de hauteur.

Important : en règle générale, plus l'image est grande, plus vous aurez d'espace pour redimensionner, déplacer et faire pivoter l'image sans perte de qualité d'image.

Ajout d'effets de survol de transformation

Maintenant que notre image est en place, il est temps d'utiliser ces options de transformation pour créer l'effet de survol Ken Burns. Accédez à l'onglet de conception pour ouvrir les options de transformation. Activez les effets de survol et sélectionnez l'onglet survol. Désormais, toutes les personnalisations d'effet de transformation ne s'appliqueront qu'à l'état de survol du module d'image. Ensuite, sous l'onglet Échelle de transformation, mettez à jour les éléments suivants :

Transformer l'axe des x de l'échelle (survol) : 136 %
Axe des ordonnées de l'échelle de transformation (survol) : 136 %

Cliquez ensuite sur l'onglet Transformer la traduction et mettez à jour les éléments suivants :

Transformer Traduire l'axe des x (survol): 3%
Transformer Traduire l'axe des y (survol): 9%

Cela déplace l'image vers la gauche de 3% et vers le bas de 9%. Pour cette image spécifique, je recherchais un effet qui zoomerait et amènerait le couple au centre de la fenêtre de la colonne.

Par défaut, les valeurs de longueur de traduction seront en pixels (pas en pourcentage). Vous pouvez utiliser des pixels pour déplacer l'image, mais je trouve que l'utilisation de pourcentages rend le positionnement plus réactif.

Cliquez ensuite sur l'onglet Transformer la rotation et mettez à jour les éléments suivants :

Transformer Rotation axe x (survol): 6deg

Mettre à jour les options de transition

Enfin, nous devons mettre à jour la durée de la transition (le temps nécessaire à l'effet de survol de la transformation) et la courbe de vitesse (la fonction de synchronisation qui permet à la transition de changer de vitesse sur sa durée). Pour cet exemple, je veux que la transition prenne plus de temps pour un effet Ken Burns plus dramatique (et classique) en survol. Pour ce faire, allez dans l'onglet avancé et mettez à jour les options de transition comme suit :

Durée de la transition : 2000 ms (ou 2 secondes)
Courbe de vitesse de transition : linéaire (cela garantit que la vitesse de la transition ne change pas en durée)

Résultat final

Voyons maintenant le résultat final. Ne vous laissez pas tromper par le caractère saccadé du gif ci-dessous. La transition est vraiment fluide sur un site en direct.

Ajout de l'effet de survol Ken Burns à plusieurs images dans une rangée de trois colonnes

Si vous souhaitez ajouter l'effet de survol ken burns aux images dans plusieurs colonnes, le même processus s'applique. La principale chose que vous devez faire est de vous assurer et d'ajouter l'extrait de code css "overflow:hidden" à chacune des colonnes qui contiennent votre image.

En utilisant notre exemple précédent ci-dessus, modifiez la structure des colonnes de la ligne en une disposition à trois colonnes.

Ensuite, mettez à jour les paramètres de ligne avec les extraits CSS personnalisés qui masqueront le débordement de chaque colonne.

Colonne 1 Élément principal CSS :

overflow:hidden;

Colonne 2 Élément principal CSS :

overflow:hidden;

Colonne 3 Élément principal CSS :

overflow:hidden;

Copiez ensuite le module image et collez-le dans les colonnes 2 et 3.

C'est ça. Voici le résultat final.

Étant donné que cette conception est plus typique d'une disposition en grille de galerie, vous souhaiterez probablement accélérer un peu la durée de la transition pour affiner l'animation de survol. Vous pouvez le faire facilement en utilisant la fonction multisélection de Divi. Maintenez ctrl ou cmd et sélectionnez tous les modules d'image. Cliquez ensuite sur l'icône d'engrenage des paramètres sur l'une des images pour ouvrir le modal Paramètres des éléments.

Désormais, toutes les mises à jour que vous effectuez dans les paramètres des éléments seront appliquées à toutes les images à la fois. Mettez à jour les options de transition dans les paramètres de l'élément comme suit :

Durée de transition : 500 ms

Voici la nouvelle durée de transition en vigueur.

Ajout de l'effet de survol Ken Burns à un module quelconque avec une image d'arrière-plan

L'effet de survol Ken Burns peut également être utilisé pour des modules autres que le module Image. Cela fonctionne bien si vous souhaitez transformer du texte ou des icônes avec l'image d'arrière-plan d'un module.

Voici comment ajouter l'effet Ken Burns à un module de texte.

Créez d'abord une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne.

Mettez à jour le module de texte avec le contenu suivant :

<h1>We're Engaged!</h1>

Ajoutez ensuite une image de fond au module. N'oubliez pas d'ajouter une image suffisamment grande pour laisser de la place pour la mise à l'échelle et le déplacement de l'image au survol.

Ensuite, mettez à jour les options de conception de titre comme suit :

Police de titre : Prata
Taille du texte de l'en-tête : 6vw
Rembourrage personnalisé : 10vw en haut, 10vw en bas, 3vw à gauche

Durée de transition : 5000 ms

Ajoutez maintenant les paramètres de transformation suivants au module de texte.

Transformer l'axe des x de l'échelle (survol) : 118%
Axe des ordonnées de l'échelle de transformation (survol) : 118%

Transformer Traduire l'axe des X (survol): 6%
Transformer traduire l'axe des y (survol) : 6%

Maintenant, mettez à jour les paramètres de ligne avec le CSS personnalisé suivant pour la colonne.

Élément principal de la colonne CSS :

overflow:hidden;

Vérifiez maintenant le résultat.

Remarquez comment le texte et l'image d'arrière-plan se transformeront ensemble au survol.

Combinaison de l'effet de survol Ken Burns avec des effets de survol supplémentaires

Vous pouvez également combiner l'effet de survol Ken Burns appliqué à un module avec des effets supplémentaires pour encore plus de créativité.

Combinaison de l'effet de survol de Ken Burns avec des effets de filtre

Au cas où vous les oublieriez, les effets de filtre sont un excellent moyen d'ajouter un style créatif à vos modules, en particulier en survol. Et vous pouvez combiner ces effets de filtre avec un effet de transformation pour des transitions de survol assez uniques.

Pour vous montrer, utilisons l'exemple ci-dessus qui a ajouté l'effet ken burns à un module de texte. Étant donné que le module de texte a déjà l'effet de survol de transformation en place, ajoutons un effet de filtre supplémentaire pour changer l'image du noir et blanc en couleur.

Ouvrez les paramètres du module de texte et mettez à jour l'option de filtre suivante :

Saturation (par défaut) : 0%
Saturation (survol): 100%

Cette transition définira le module de texte sur 0% de saturation par défaut, ce qui supprimera la couleur en le rendant noir et blanc. Le retour à 100 % au survol ajoutera la couleur d'origine de l'image.

Voici l'effet final de l'effet de filtre combiné à l'effet de survol ken burns.

Combinaison de l'effet de survol de Ken Burns avec des effets de transformation de ligne

Pour cet exemple, je vais vous montrer comment combiner l'effet de survol ken burns avec un effet de transformation supplémentaire ajouté à la ligne. L'idée est d'utiliser des effets de transformation pour mettre à l'échelle et faire pivoter la ligne à son état par défaut, puis restaurer la conception d'origine au survol.

REMARQUE : Cette technique ne fonctionnera vraiment bien que pour une ligne à une colonne avec un seul module. En effet, le visiteur devra survoler le module et la ligne simultanément. Par conséquent, le module doit occuper toute la hauteur et la largeur de la rangée. Des modules ou un espacement supplémentaires interrompront l'état de survol et causeront des problèmes.

Pour ce faire, nous allons rester avec notre conception actuelle de module de texte qui combine déjà l'effet de survol ken burns avec un effet de filtre supplémentaire. Il s'agit donc en fait d'un triple effet de survol !

Ouvrez les paramètres de la ligne qui contient le module de texte. Ensuite, mettez à jour les éléments suivants :

Rembourrage personnalisé : 0px en haut, 0px en bas, 0px à gauche, 0px à droite

Cela permet de s'assurer qu'il n'y a pas d'espacement supplémentaire entre le module de texte et la ligne.

Ensuite, nous allons ajouter une ombre de boîte à la ligne comme suit :

Box Shadow : voir capture d'écran
Force du flou d'ombre de la boîte: 36px
Couleur de l'ombre : rgba(0,0,0,0.17)

Ajoutez maintenant les effets de transformation suivants :

Transformer l'axe des x de l'échelle (par défaut) : 70 %
Transformer l'axe des x de l'échelle (survol) : 100 %
Transformer l'axe des ordonnées de l'échelle (par défaut) : 70 %
Axe des ordonnées de l'échelle de transformation (survol) : 100 %

Transformer Rotation axe y (par défaut): 19deg
Transformer Rotation axe y (survol): 0deg
Transformation Rotation axe z (par défaut) : 23 deg
Transformer Rotation axe z (survol): 0deg

Voyons maintenant le résultat final.

Ajout de l'effet de survol Ken Burns à une ligne entière de contenu

Juste au cas où vous vous poseriez la question, l'effet de survol Ken Burns peut également être utilisé pour donner vie à une rangée entière de contenu en survol. Ce ne sera pas très pratique pour les lignes avec beaucoup de contenu car cela sera source de confusion ou de distraction pour les visiteurs. Mais pour des choses comme les en-têtes, cela peut être une technique de conception utile. L'astuce consiste à ajouter l'extrait CSS personnalisé "overflow:hidden" à la section. Ensuite, vous pouvez ajouter les effets de transformation à la ligne.

Dernières pensées

Bien que l'effet Ken Burns existe depuis un certain temps, vous pouvez toujours le trouver utile pour créer des effets de survol assez uniques pour vos images et modules dans Divi. L'astuce est de savoir utiliser les options de Divi Transform qui sont étonnamment intuitives. Ces exemples donnés dans ce didacticiel étaient destinés à introduire le concept et, espérons-le, à fournir un peu d'inspiration pour votre propre usage. Lorsque vous pensez à toutes les façons dont vous combinez les options de transformation avec toutes les autres options de style disponibles dans Divi, des tonnes d'idées commencent à apparaître.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!