Creer un effet gluant ! - Vidéo Dailymotion

Basti Ui

16/05/2023

Catégorie

📚

Éducation

Transcription

Afficher la transcription complète de la vidéo

00:00 Dans ce tuto figma je vais vous expliquer comment réaliser cet effet et cet effet sans aucun plugin.

00:06 C'est parti !

00:06 On va faire un plan de travail de 1000 par 1000 et c'est parti on y va !

00:10 D'abord on va créer des cercles noirs tout à fait random on va les mettre à 0,0.

00:14 Ça c'est l'étape 1.

00:15 Ensuite on va les grouper et on va appliquer un blur donc effect ici et on vient mettre l'effet layer blur.

00:21 On va le mettre à peu près à 40 pour l'instant même un peu plus je dirais plus ce sera flou plus ce sera sticky.

00:26 On va créer un rectangle gris je vais le mettre full page pour l'instant et on va lui mettre la valeur 808080.

00:32 Voilà ce gris là.

00:33 Vous allez mettre ce rectangle gris en color dodge voilà ça vient rendre le flou un peu plus tracé.

00:38 Donc là on a un contour qui se dessine.

00:40 On va dupliquer ce rectangle donc là qu'on ne voit pas mais qui s'appelle du coup on va l'appeler rect.

00:44 Voilà on le duplique une deuxième fois et cette fois ci on va le mettre en color burn mais en couleur noire.

00:48 Donc là je mets 0,0,0 voilà et je viens mettre color burn ce qui donne ce résultat là.

00:53 Et maintenant vous allez tout simplement verrouiller en haut ici les deux rectangles.

00:56 Regardez si je viens ici bouger maintenant les ronds regardez ce qui se passe.

01:00 Et là par exemple j'ai fait l'exemple ici en gros j'ai fait plusieurs ronds qui sont dans cette position là

01:04 et au clic je viens faire un smart animate jusque là et du coup regardez le résultat.

Recommandations