Att skapa en rullningsanimering för textbakgrund är ett unikt sätt att lägga till färgglada animerade texturer till din text. webbplats medan en användare rullar på sidan. Med Divi, processen är förvånansvärt lätt när du lär dig några viktiga tekniker.

I den här handledningen kommer vi bara att använda kraften i de inbyggda parametrarna i Divi för att skapa 3 unika mönster som har en färgglad textbakgrundsrullande animation. Vi kommer till och med att visa dig hur du skapar en mörk version av varje design för ett helt nytt utseende.

Låt oss börja!

Möjligt resultat

Här är en titt på de mönster vi kommer att bygga idag.

Design 1: Textbakgrundsgradient med horisontell rullningseffekt

Denna första design kommer att ha en horisontell rullningseffekt som animerar en färgad separatormodul bakom en textmodul med skärmfiltret.

Lägg till en kolumn

För att komma igång, lägg till en rad med en kolumn i standardavsnittet.

Välj divi-kolumnlayout

Lägg till en textmodul

Lägg sedan till en ny textmodul i kolumnen.

Lägg till divi-textmodul

Innehåll

Pour le innehåll klistra in följande HTML-kod i rutan innehåll:

Spara fragmentkod

Formatera texten

Uppdatera sedan textdesignen enligt följande:

  • Bakgrundsfärg: #ffffff
  • Textstilsstil: TT
  • Textfärg: # 000000
  • Textstorlek: 100 px (skrivbord), 40 px (telefon)
  • Avstånd mellan textbokstäver: 0.15 em
  • Höjd på textrad: 1em
  • Justering av texten: centrum
Divi text anpassning
  • Titel Typsnitt: Merriweather
  • Titel typsnitt vikt: fetstil
  • Titelstilsstil: TT
  • Rubriktextjustering: Mitt
  • Rubriktextfärg: # 000000
  • Rubriktextstorlek: 200 pixlar (skrivbord), 80 pixlar (telefon)
  • Titelbokstavsavstånd: 0.15 em
  • Titelradens höjd: 1em

Polstring och filter

Nu måste vi lägga till lite stoppning och skärmfilter i textmodulen. Filtret behövs för att denna design ska fungera eftersom det är det som gör att bakgrundsfärger / mods kan visas bakom texten.

För att lägga till fyllning och filter uppdaterar du följande:

  • stoppning: 15px hög, 20px låg
  • Blandningsläge: skärm

Obs! Skärmblandningsläget fungerar bäst med svart text på en vit bakgrund. Om vi ​​ville använda vit text på svart bakgrund skulle vi använda läget Multiply blend.

Divi textmodulavståndskonfiguration

Övre och nedre separator

När vår textmodul är klar, låt oss lägga till några separatorer (ovan och en under textmodulen) för ett ytterligare designelement.

Lägg till en nedre separator

Lägg till en ny separationsmodul under textmodulen.

Lägg till diviseparator-modul
Högre separationsinställningar

Öppna separatorinställningarna och välj NEJ för att visa separatorn.

divi text bakgrundsrullningseffekter

Uppdatera sedan bakgrunden och ge avdelaren samma blandningsläge som textmodulen enligt följande:

  • Bakgrundsfärg på vänster lutning: # 000000
  • Lutningsbakgrundsfärg till höger: #ffffff
  • Lutningsriktning: 90deg
  • Startposition: 48%
  • Slutposition: 0%
  • Blandningsläge: skärm
Konfiguration av färgavgränsare

Uppdatera sedan avdelarens höjd på telefonskärmen enligt följande:

  • Höjd: 15px (telefon)
Divi separator konfiguration

Lägg till övre separator

För att skapa den översta avdelaren, duplicera den föregående nedre avdelaren och dra den över textmodulen med hjälp av lagrets visningsområde.

Avdelareinsats

Vänd sedan in färgerna på lutningsbakgrunden.

Gradient bakgrundsinsättning

Uppdatera radparametrar

När våra övre och nedre separatorer är på plats uppdaterar du radparametrarna enligt följande:

  • Rännbredd: 1 (för att ta bort de lägre marginalerna mellan modulerna)
  • Maximal bredd: 600 pixlar (för att hålla en sammanhängande design på skrivbordet och surfplattan)
  • Linjeinriktning: mitt
  • Polstring: 0px hög, 0px låg
  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Anpassa delningslinjeparametern

Skapa en avgränsare för bakgrundsfärgen på den animerade texten

Det sista elementet i denna första design är avdelaren som vi använder för att animera bakgrundsfärgen på texten på rullningen. För att göra detta, lägg till en ny separationsmodul under den nedre avdelaren.

Separatorinsättning

Välj sedan NO för att visa separatorn.

Visa avdelare

Inställningar för bakgrundsdelare

Uppdatera separatorn med en lutningsbakgrund enligt följande:

  • Bakgrundsfärg på vänster lutning: # e02b20
  • Höger bakgrundsgradientfärg: # 8300e9
  • Lutningsriktning: 90deg
  • Startposition: 30%
  • Slutposition: 70%
Divi bakdelare

Vi vill att separatorns höjd ska vara tillräckligt hög för att färga all vår text i textmodulen och de övre och nedre separatorerna. För denna design ställer du in höjden till 400 pixlar.

  • Höjd: 400px
Avdelare höjddelare

Ge sedan avdelaren en absolut position för att placera den direkt ovanför de andra modulerna. Använd Z-index för att placera avdelaren bakom de andra modulerna.

  • Position: Absolut
  • Z-index: -1
Indexavgränsare
Bakgrundsavdelare rullar effekter

Med avgränsaren på plats är allt vi behöver göra att flytta avgränsaren bakom texten med hjälp av rullningseffekterna Divi. För denna design lägger vi helt enkelt till horisontell rörelse på rullningen.

Uppdatera följande objekt:

Under fliken Horisontell rörelse ...

office

  • Aktivera horisontell rörelse: JA
  • Startförskjutning: 6 (vid 20%)
  • Genomsnittlig offset: 0 (40-60%)
  • Slutförskjutning: -6 (vid 80%)

Telefon

  • Startförskjutning: 3
  • Slutförskjutning: -3

Se också till att ställa in utlösaren för rörelseeffekten i mitten av klippet:

  • Trigger motion-effekt: mitt i elementet
Animeringskonfiguration

Lägg till sektionsavstånd

Lägg till följande i avsnittet för att skapa ett tillfälligt rullningsutrymme för att testa designen:

  • Marginal: 80vh ovan, 80vh nedan
Konfigurationsstorleksavdelning

Avslutande tankar

Textbakgrundsanimationsdesignerna som visas i den här artikeln skulle faktiskt fungera bra som en statisk design utan att lägga till rörelse på rullningen. De ytterligare rullningseffekterna tar dock designen till en helt ny nivå. Experimentera gärna med fler färger och effekter!

Jag kan inte vänta med att höra från dig i kommentarerna.

Till din hälsa!