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.
Lägg till en textmodul
Lägg sedan till en ny textmodul i kolumnen.
Innehåll
Pour le innehåll klistra in följande HTML-kod i rutan innehåll:
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:
- 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.
Ö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.
Högre separationsinställningar
Öppna separatorinställningarna och välj NEJ för att visa separatorn.
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
Uppdatera sedan avdelarens höjd på telefonskärmen enligt följande:
- Höjd: 15px (telefon)
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.
Vänd sedan in färgerna på lutningsbakgrunden.
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
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.
Välj sedan NO för att visa separatorn.
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%
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
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
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
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
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!