Wie man magnetische Elemente in Webflow baut - No Code Solution

Wie man einen schönen magnetischen Button-Hover-Effekt mit Webflow erstellt

Willst du den Schaltflächen deiner Webflow-Website ein kreatives Flair verleihen? Dann ist der magnetische Button-Hover-Effekt genau das Richtige für dich! In diesem Tutorial zeigen wir dir Schritt für Schritt, wie du diesen Effekt mit Webflow erzeugst.

Einführung

Hallo zusammen! Mein Name ist Marvin Aziz, und ich freue mich, dir zu zeigen, wie du mit Webflow einen schönen magnetischen Button mit Hover-Effekt erstellen kannst. In diesem Tutorial werden wir eine benutzerdefinierte Schaltfläche mit einem magnetischen Effekt erstellen, der aktiviert wird, wenn du mit dem Mauszeiger darüber fährst.

Erste Schritte

Legen wir gleich los! Im Folgenden findest du die Schritte, mit denen wir unseren Magnetbutton erstellen:

1. Erstelle eine benutzerdefinierte Schaltfläche, indem du einen Link-Block mit Text darin und einen Hintergrund-Wrapper verwendest.
2. Füge einen weiteren Div-Block hinzu und platziere deinen Button darin, um einen breiteren Hover-Bereich zu schaffen.
3. Gehe zur Interaktion und wähle "Maus über Element bewegen", um den Magneteffekt zu aktivieren.
4. Erstelle eine neue Animation und nenne sie "Magnetisches Maus-Tutorial". Lege die Startposition fest und bewege das Element auf beiden Achsen nach hinten und dann auf beiden Achsen zu 100 Prozent nach vorne, um den magnetischen Effekt zu erzeugen.
5. Passe die Animation an, um sie flüssiger zu machen und entferne die Auslöser für mobile Ansichten.
6. Wende die magnetische Blockklasse auf andere Elemente wie Überschriften oder Bilder an, um denselben Effekt zu erzielen.

Schritt-für-Schritt-Anleitung

Schauen wir uns die einzelnen Schritte zur Erstellung unseres Magnetbuttons genauer an.

Schritt 1: Erstellen einer benutzerdefinierten Schaltfläche

Wir beginnen damit, eine benutzerdefinierte Schaltfläche zu erstellen, indem wir einen Link-Block mit Text darin und einen Hintergrund-Wrapper verwenden. Befolge dazu die folgenden Schritte:

1. Öffne Webflow und erstelle ein neues Projekt.
2. Ziehe einen Linkblock auf deine Seite und füge Text hinzu.
3. Wähle den Link-Block aus und füge einen Hintergrund-Wrapper hinzu, indem du auf das "Plus"-Symbol im Stil-Bedienfeld klickst und "Hintergrund" aus dem Dropdown-Menü auswählst.
4. Passe den Hintergrundumschlag nach deinen Wünschen an, indem du zum Beispiel einen Farbverlauf oder ein Bild hinzufügst.

Schritt 2: Einen weiteren Div-Block hinzufügen

Als Nächstes fügen wir einen weiteren div-Block hinzu und platzieren unsere Schaltfläche darin, um einen breiteren Hover-Bereich zu schaffen. So geht's:

1. Ziehe einen div-Block auf deine Seite und platziere ihn über deinem Button.
2. Ziehe deine Schaltfläche in den div-Block.
3. Passe die Größe und Position des Div-Blocks nach deinem Geschmack an.

Schritt 3: Aktiviere den magnetischen Effekt

Aktiviere nun den magnetischen Effekt, indem du diese Schritte befolgst:

1. Wähle den Div-Block aus, der deine Schaltfläche enthält.
2. Klicke auf die Schaltfläche "Interaktion hinzufügen" im Interaktionsbereich.
3. Wähle "Maus über Element bewegen" aus dem Dropdown-Menü.
4. Passe die Einstellungen für Entfernung und Stärke nach deinem Geschmack an.

Schritt 4: Eine neue Animation erstellen

Wir erstellen eine neue Animation und nennen sie "Magnetisches Maus-Tutorial". So geht's:

1. Klicke auf die Schaltfläche "Neue Animation" im Animationsfenster.
2. Nenne die Animation "Magnetisches Maus-Tutorial".
3. Lege die Startposition fest, indem du "Aktuell" auswählst.
4. Verschiebe das Element auf beiden Achsen nach hinten, indem du die X- und Y-Positionen auf -10px setzt.
5. Verschiebe das Element auf beiden Achsen um 100 Prozent nach vorne, indem du die X- und Y-Positionen auf 10px setzt.
6. Passe die Dauer und die Lockerungseinstellungen nach deinem Geschmack an.

Schritt 5: Anpassen der Animation

Um die Animation flüssiger zu machen, befolge diese Schritte:

1. Wähle die Animation "Magnetisches Maus-Tutorial".
2. Passe die Einstellungen für Dauer, Lockerung und Verzögerung nach deinem Geschmack an.
3. Entferne die Auslöser für mobile Ansichten, indem du auf die Schaltfläche "Auslöser bearbeiten" klickst und das Häkchen bei "Mobiles Querformat", "Mobiles Hochformat" und "Tablet Querformat" entfernst.

Vielen Dank, dass du dir dieses Tutorial angeschaut hast! Wusstest du, dass ich einen Newsletter habe, in dem ich dir alle meine besten Vorlagen, ausgewählte kreative Arbeiten und alles, was ich während meiner Arbeit als Agenturinhaberin lerne, schicke? Schau es dir an!

‍