Diese Unterseite beinhaltet Affiliate-Links, die mich unterstützen und keinen Nachteil für dich bieten.
Ressourcen/

Variable Heading Hover-Animation

Schritt 1: Webflow Struktur einfügen

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"d3c6b393-9b71-07de-6412-2def7dd658e5","type":"Block","tag":"section","classes":["5c958f5a-a9f2-e88a-535f-dca3ae59f767"],"children":["e2afe999-3af7-d92b-6a42-cf24cce0ec88"],"data":{"text":false,"tag":"section","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e2afe999-3af7-d92b-6a42-cf24cce0ec88","type":"Block","tag":"div","classes":["4aa2ba5d-bf7d-9153-83e0-cdc4d192f98c"],"children":["d112a4bb-7c80-51c9-2620-485db3c7df55"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d112a4bb-7c80-51c9-2620-485db3c7df55","type":"Block","tag":"div","classes":["4aa2ba5d-bf7d-9153-83e0-cdc4d192f98d"],"children":["c8f3fbe5-60d4-a968-8362-f102904cc054"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c8f3fbe5-60d4-a968-8362-f102904cc054","type":"Block","tag":"div","classes":["4aa2ba5d-bf7d-9153-83e0-cdc4d192f98b"],"children":["2523c6b3-7976-6ce7-a530-36ff6037b5b5"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"2523c6b3-7976-6ce7-a530-36ff6037b5b5","type":"Block","tag":"div","classes":["ed2c68ca-e0eb-feda-c803-3fe259001dbf"],"children":["11544c70-0cdc-ee00-8914-b4d55aa9dd6f"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"11544c70-0cdc-ee00-8914-b4d55aa9dd6f","type":"Heading","tag":"h1","classes":["d4788739-dfdd-3035-2912-25058cd150fb"],"children":["84d8702b-e9a4-3ede-b29f-5e40112c8a49"],"data":{"tag":"h1","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"84d8702b-e9a4-3ede-b29f-5e40112c8a49","text":true,"v":"This is a variable Heading"}],"styles":[{"_id":"5c958f5a-a9f2-e88a-535f-dca3ae59f767","fake":false,"type":"class","name":"h_hero_section","namespace":"","comb":"","styleLess":"display: flex; min-height: 90vh; justify-content: center; align-items: center; border-top-left-radius: 1.5em; border-top-right-radius: 1.5em; border-bottom-left-radius: 1.5em; border-bottom-right-radius: 1.5em; background-color: #fad42b;","variants":{},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"4aa2ba5d-bf7d-9153-83e0-cdc4d192f98c","fake":false,"type":"class","name":"padding-global","namespace":"","comb":"","styleLess":"width: 100%; padding-right: 2.5em; padding-left: 2.5em;","variants":{"small":{"styleLess":"padding-right: 1.5em; padding-left: 1.5em;"}},"children":[],"origin":null,"selector":null},{"_id":"4aa2ba5d-bf7d-9153-83e0-cdc4d192f98d","fake":false,"type":"class","name":"padding-section-browser","namespace":"","comb":"","styleLess":"padding-top: 6.5em; padding-bottom: 4em;","variants":{"medium":{"styleLess":"padding-top: 5em;"},"small":{"styleLess":"padding-top: 4em;"}},"children":[],"origin":null,"selector":null},{"_id":"4aa2ba5d-bf7d-9153-83e0-cdc4d192f98b","fake":false,"type":"class","name":"container-large","namespace":"","comb":"","styleLess":"position: relative; width: 100%; max-width: 100em; margin-right: auto; margin-left: auto; flex-direction: column; flex-wrap: nowrap;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"ed2c68ca-e0eb-feda-c803-3fe259001dbf","fake":false,"type":"class","name":"h_hero_outside-wrapper","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center;","variants":{},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null},{"_id":"d4788739-dfdd-3035-2912-25058cd150fb","fake":false,"type":"class","name":"x_hero_heading","namespace":"","comb":"","styleLess":"","variants":{"tiny":{"styleLess":"font-size: @raw<|clamp(3em, 15vw, 5em)|>;"}},"children":[],"createdBy":"6556337c57e1c52f0feb125c","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i","interactionTypeId":"MOUSE_MOVE_INTERACTION","eventIds":["e"],"target":"68ce852943865248ab5362a4|d3c6b393-9b71-07de-6412-2def7dd658e5","createdOn":1758365709005}],"events":[{"id":"e","name":"","animationType":"custom","eventTypeId":"MOUSE_MOVE","action":{"id":"","actionTypeId":"GENERAL_CONTINUOUS_ACTION","instant":true,"config":{"actionListId":"a","affectedElements":{}}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"68ce852943865248ab5362a4|d3c6b393-9b71-07de-6412-2def7dd658e5","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"68ce852943865248ab5362a4|d3c6b393-9b71-07de-6412-2def7dd658e5","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":[{"continuousParameterGroupId":"a-p","selectedAxis":"X_AXIS","basedOn":"ELEMENT","reverse":false,"smoothing":90,"restingState":50},{"continuousParameterGroupId":"a-p-2","selectedAxis":"Y_AXIS","basedOn":"ELEMENT","reverse":false,"smoothing":50,"restingState":50}],"createdOn":1758365709005}],"actionLists":[{"id":"a","title":"h_variable-heading","continuousParameterGroups":[{"id":"a-p","type":"MOUSE_X","parameterLabel":"Mouse X","continuousActionGroups":[{"keyframe":0,"actionItems":[{"id":"a-n","actionTypeId":"STYLE_FONT_VARIATION","instant":false,"config":{"delay":0,"easing":"","duration":500,"fontVariations":[{"type":"wght","id":"3679","value":200}],"target":{"nodeId":"68ce852943865248ab5362a4|11544c70-0cdc-ee00-8914-b4d55aa9dd6f","appliesTo":"ELEMENT","styleBlockIds":[],"boundaryMode":false}}}]},{"keyframe":100,"actionItems":[{"id":"a-n-2","actionTypeId":"STYLE_FONT_VARIATION","instant":false,"config":{"delay":0,"easing":"","duration":500,"fontVariations":[{"type":"wght","id":"2e04","value":800}],"target":{"nodeId":"68ce852943865248ab5362a4|11544c70-0cdc-ee00-8914-b4d55aa9dd6f","appliesTo":"ELEMENT","styleBlockIds":[],"boundaryMode":false}}}]}]},{"id":"a-p-2","type":"MOUSE_Y","parameterLabel":"Mouse Y","continuousActionGroups":[]}],"createdOn":1758365718721}]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}

Schritt 2: Externe Scripte einfügen

HTML

Schritt
: CSS Code einfügen

CSS

Schritt
: Javascript Code einfügen

JavaScript

Einstellungen & Variablen

Damit der Hover-Effekt richtig funktioniert, musst du eine variable Schriftart in den Webflow Einstellungen hochladen. Diese Versionen enthalten alle Schriftarten in einer Datei und lassen sich dadurch fließend verändern.

Eine geeignete Auswahl solcher Schriftarten kannst du auf Google Fonts unter dem folgenden Link finden: Google Fonts – Variable

Häufige Fragen & Problem

No items found.

Mehr Tools, mehr Know-how, für dein Postfach

Erhalte Updates, Tools, Veröffentlichungen und frische Tipps jede Woche bequem per E-Mail.

Hol' dir den Webflow Boost

Trete dem Newsletter bei und erhalte wöchentlich exklusive Tipps, Tutorials & News direkt in dein Postfach.

Beitritt erfolgreich! :)
Etwas ist schief gelaufen :(