Comment construire des éléments magnétiques dans Webflow - Solution sans code

Comment créer un magnifique effet de survol de bouton magnétique à l'aide de Webflow

Tu cherches à ajouter une touche créative aux boutons de ton site Webflow? Ne cherche pas plus loin que l'effet de survol du bouton magnétique ! Dans ce tutoriel, nous allons te montrer comment créer cet effet étape par étape à l'aide de Webflow.

Introduction

Bonjour à tous ! Je m'appelle Marvin Aziz, et je suis ravi de te guider dans la création d'un magnifique effet de survol de bouton magnétique à l'aide de Webflow. Dans ce tutoriel, nous allons créer un bouton personnalisé avec un effet magnétique qui s'active lorsque tu le survoles.

Pour commencer

Allons-y tout de suite ! Voici les étapes que nous allons suivre pour créer notre bouton magnétique :

1. Crée un bouton personnalisé en utilisant un bloc de lien avec du texte à l'intérieur et une enveloppe d'arrière-plan.
2. Ajoute un autre bloc div et place ton bouton à l'intérieur pour créer une zone de survol plus large.
3. Va dans l'interaction et sélectionne "passage de la souris sur l'élément" pour activer l'effet magnétique.
4. Crée une nouvelle animation et nomme-la "tutoriel souris magnétique". Définis la position de départ et déplace l'élément vers l'arrière sur les deux axes, puis vers l'avant à 100 % sur les deux axes pour créer l'effet magnétique.
5. Ajuste l'animation pour la rendre plus fluide et supprime les déclencheurs pour les vues mobiles.
6. Applique la classe de bloc magnétique à d'autres éléments comme les titres ou les images pour créer le même effet.

Instructions étape par étape

Regardons de plus près chaque étape pour créer notre bouton magnétique.

Étape 1 : Créer un bouton personnalisé

Nous allons commencer par créer un bouton personnalisé en utilisant un bloc de lien avec du texte à l'intérieur et une enveloppe d'arrière-plan. Pour ce faire, suis les étapes suivantes :

1. Ouvre Webflow et crée un nouveau projet.
2. Fais glisser un bloc de lien sur ta page et ajoute du texte à l'intérieur.
3. Sélectionne le bloc de lien et ajoute une enveloppe d'arrière-plan en cliquant sur l'icône "plus" dans le panneau Styles et en sélectionnant "Arrière-plan" dans le menu déroulant.
4. Personnalise l'habillage de l'arrière-plan à ta guise, par exemple en ajoutant un dégradé ou une image.

Étape 2 : Ajouter un autre bloc Div

Ensuite, nous allons ajouter un autre bloc div et placer notre bouton à l'intérieur pour créer une zone de survol plus large. Voici comment procéder :

1. Fais glisser un bloc div sur ta page et place-le au-dessus de ton bouton.
2. Fais glisser ton bouton à l'intérieur du bloc div.
3. Ajuste la taille et la position du bloc div à ta convenance.

Étape 3 : Activer l'effet magnétique

Maintenant, activons l'effet magnétique en suivant les étapes suivantes :

1. Sélectionne le bloc div qui contient ton bouton.
2. Clique sur le bouton "Ajouter une interaction" dans le panneau des interactions.
3. Sélectionne "Déplacement de la souris sur l'élément" dans le menu déroulant.
4. Ajuste les paramètres de distance et de force à ta convenance.

Étape 4 : Créer une nouvelle animation

Nous allons créer une nouvelle animation et la nommer "tutoriel de la souris magnétique". Voici comment procéder :

1. Clique sur le bouton "Nouvelle animation" dans le panneau Animations.
2. Nomme l'animation "tutoriel de la souris magnétique".
3. Définis la position de départ en sélectionnant "Current".
4. Déplace l'élément vers l'arrière sur les deux axes en réglant les positions X et Y sur -10px.
5. Déplace l'élément vers l'avant à 100 pour cent sur les deux axes en réglant les positions X et Y à 10px.
6. Ajuste les paramètres de durée et d'assouplissement à ta convenance.

Étape 5 : Ajuster l'animation

Pour rendre l'animation plus fluide, suis les étapes suivantes :

1. Sélectionne l'animation "tutoriel de la souris magnétique".
2. Ajuste les paramètres de durée, d'assouplissement et de retard à ta convenance.
3. Supprime les déclencheurs pour les vues mobiles en cliquant sur le bouton "Modifier les déclencheurs" et en décochant "Paysage mobile", "Portrait mobile" et "Paysage tablette".

Merci beaucoup d'avoir suivi ce tutoriel ! Sais-tu que j'ai une newsletter où je t'envoie tous mes meilleurs modèles, mes travaux créatifs choisis et où je partage tout ce que j'apprends en travaillant en tant que propriétaire d'agence ? Jetez-y un coup d'œil !

‍