Créer des ombres d’images en mouvement lors du défilement dans Divi

Dans le domaine de la conception web, nous considérons généralement les ombres comme quelque chose que nous pouvons ajouter à Photoshop, ou comme des attributs CSS (comme les ombres de boîte ou de texte). Mais avec Divi, on peut sortir de la boîte. En apportant quelques modifications aux filtres intégrés de Divi et aux options d’effet de défilement, nous pouvons transformer n’importe quelle image en ombre réelle. Dans ce tutoriel, nous vous montrerons comment créer des ombres d’images en mouvement lorsque vous Défilez dans Divi. L’astuce est de trouver une image PNG avec une forme unique de sorte qu’après la transformation, l’image conserve sa forme et ressemble à l’ombre réelle de l’image. Une fois l’image \ ombre prête, nous pouvons ajouter quelques effets de défilement pour déplacer les ombres pendant que l’utilisateur défile. Cet effet extraordinaire (mais familier) ajoutera un élément de conception extraordinaire à votre site Web pour apporter une nouvelle vitalité.
Allons – y! Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier

Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous vous êtes inscrit avec succès. Vérifiez votre adresse e – mail
C’est là que le texte sera conçu. Nous utiliserons l’image de la branche dans le paquet de mise en page du thérapeute holistique. Ce sera la même image que nous utiliserons plus tard pour déplacer les ombres.
Ajouter une image ajouter un nouveau formulaire image sous le formulaire texte. Alors Téléchargez l’image. Dans l’onglet conception, utilisez les paramètres du filtre pour réduire l’opacité de l’image. Opacité: 20% Ensuite, utilisez les options de transformation suivantes pour déplacer l’image vers la gauche et vers le haut: Transform trans X: – 20% Transform y: – 90% Ensuite, donnez une position absolue à l’image. Position: absolue

Partie 2: créer des ombres d’images en mouvement une fois la fiction terminée dans la colonne de gauche, nous pouvons commencer à créer des images en mouvement et des ombres.
Ajouter une image primaire ajouter un nouveau module d’image dans la colonne de droite.

Téléchargez ensuite une image d’au moins 800 pixels de largeur. Comme nous ajouterons des ombres mobiles pour les branches de l’arbre, il est logique d’utiliser des images de position extérieure.

Ensuite, tracez la marge inférieure par défaut sous le formulaire comme suit: marge inférieure: 0px Créer l’ombre 1 de l’image en mouvement maintenant, nous sommes prêts à créer la première ombre de l’image en mouvement. L’idée de base est d’utiliser une image au format PNG pour ne pas afficher l’arrière – plan transparent de l’image. Ensuite, nous utiliserons l’effet filtre pour ajuster la luminosité, l’opacité et le flou afin de transformer l’image pour qu’elle ressemble à une ombre. Comme l’image PNG a une forme unique, les ombres conservent la même forme.
Commençons par ajouter la même image PNG de la branche du paquet de mise en page du thérapeute global. Et voilà… Ajoutez un formulaire d’image sous l’image dans la colonne de droite. Puis chargez l

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *