Gå till innehållet

Hur man skapar en färgstark textbakgrundsrullningsanimation med Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Skapa en textbakgrundsrullningsanimation är ett unikt sätt att lägga till färgglada animerade texturer till din webbplatstext medan en användare rullar på sidan. Med Divi är processen överraskande lätt när du har lärt dig några viktiga tekniker.

I den här handledningen använder vi bara kraften i Divis inbyggda inställningar för att skapa 3 unika mönster som har färgglad textbakgrundsrullningsanimering. Vi visar till och med 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

För kolumnens innehåll klistra in följande HTML-kod i innehållsområdet:

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
  • 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:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • 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:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • 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 i läge är allt vi behöver göra att flytta avgränsaren bakom texten med Divis rullningseffekter. För den här designen kommer vi bara att lägga till horisontell rörelse i 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:

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

  • 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!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer