Inhaltsverzeichnis
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
Kopieren
Schritt: CSS Code einfügen
Schritt
CSS
Kopieren
Schritt: Javascript Code einfügen
Schritt
JavaScript
Kopieren
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.
Weitere Informationen
Ursprüngliche Inspiration
Mehr Tools, mehr Know-how, für dein Postfach
Erhalte Updates, Tools, Veröffentlichungen und frische Tipps jede Woche bequem per E-Mail.