Oprettelse af en tekstbaggrundsrulleanimation er en unik måde at tilføje farverige animerede teksturer til din tekst. Websted mens en bruger ruller på siden. Med Divi, processen er overraskende nem, når du først har lært et par nøgleteknikker.
I denne tutorial vil vi kun bruge kraften i de indbyggede parametre i Divi at skabe 3 unikke designs, der har en farverig rullende tekstbaggrundsanimation. Vi viser dig endda, hvordan du skaber en mørk version af hvert design for et helt nyt look.
Lad os starte!
Muligt resultat
Her er et kig på de designs, vi bygger i dag.
Design 1: Tekstbaggrundsgradient med vandret rulleeffekt
Dette første design har en vandret rulleeffekt, der animerer et farvet skillemodul bag et tekstmodul med skærmfilteret.
Tilføj en kolonne
For at komme i gang skal du tilføje en række i en kolonne til standardsektionen.
Tilføj et tekstmodul
Føj derefter et nyt tekstmodul til kolonnen.
Indhold
for indhold kolonne, indsæt følgende HTML-kode i boksen indhold:
Formatering af teksten
Opdater derefter tekstdesignet som følger:
- Baggrundsfarve: #ffffff
- Tekstskrifttype: TT
- Tekstfarve: # 000000
- Tekststørrelse: 100 px (desktop), 40 px (telefon)
- Mellemrum mellem tekster og bogstaver: 0.15 em
- Højde på tekstlinjen: 1em
- Justering af teksten: center
- Titeltype: Merriweather
- Vægt på titeltype: fed
- Titel skrifttype: TT
- Overskriftstekstjustering: Center
- Farve på sidehovedtekst: # 000000
- Overskriftstekststørrelse: 200 px (Desktop), 80 px (telefon)
- Afstand på titelbogstav: 0.15 em
- Højde på titellinjen: 1em
Polstring og filter
Nu skal vi tilføje noget polstring og skærmfilter til tekstmodulet. Filteret er nødvendigt for at dette design skal fungere, da det er det, der gør det muligt for baggrundsfarver / mods at vise bag teksten.
For at tilføje udfyldning og filter skal du opdatere følgende:
- polstring: 15px høj, 20px lav
- Blendtilstand: skærm
Bemærk: Skærmblandingstilstand fungerer bedst med sort tekst på en hvid baggrund. Hvis vi ville bruge hvid tekst på en sort baggrund, ville vi bruge tilstanden Multiply blend.
Øvre og nedre separator
Når vores tekstmodul er afsluttet, lad os tilføje nogle separatorer (over og en under tekstmodulet) til et yderligere designelement.
Tilføj en lavere separator
Tilføj et nyt separationsmodul under tekstmodulet.
Højere separationsindstillinger
Åbn separatorindstillingerne, og vælg NEJ for at få vist separatoren.
Opdater derefter baggrunden og giv skillelinjen den samme blandingstilstand som tekstmodulet som følger:
- Baggrundsfarve på venstre gradient: # 000000
- Baggrundsfarve på gradient til højre: #ffffff
- Gradientretning: 90deg
- Startposition: 48%
- Slutposition: 0%
- Blendtilstand: skærm
Opdater derefter skillelinjens højde på telefonskærmen som følger:
- Højde: 15px (telefon)
Tilføj øverste separator
For at oprette den øverste skillevæg skal du duplikere den forrige nederste skillevæg og trække den over tekstmodulet ved hjælp af lagvisningsområdet.
Inverter derefter farverne på gradientbaggrunden.
Opdater linjeparametre
Når vores øvre og nedre separatorer er på plads, skal du opdatere linjeparametrene som følger:
- Tagrendebredde: 1 (for at fjerne de nedre marginer mellem modulerne)
- Maksimal bredde: 600 pixels (for at bevare et sammenhængende design på skrivebordet og tabletten)
- Liniejustering: centrum
- Polstring: 0px høj, 0px lav
- Vandret overløb: skjult
- Lodret overløb: skjult
Opret en separator til baggrundsfarven på den animerede tekst
Det sidste element i dette første design er skillelinjen, som vi bruger til at animere baggrundsfarven på teksten på rullen. For at gøre dette skal du tilføje et nyt separationsmodul under den nederste skillevæg.
Vælg derefter NEJ for at få vist separatoren.
Indstillinger for baggrundsdeler
Opdater separatoren med en gradientbaggrund som følger:
- Baggrundsfarve i venstre gradient: # e02b20
- Højre baggrundsgradientfarve: # 8300e9
- Gradientretning: 90deg
- Startposition: 30%
- Slutposition: 70%
Vi ønsker, at separatorens højde skal være høj nok til at farve al vores tekst i tekstmodulet og de øverste og nederste separatorer. For dette design skal du indstille højden til 400 pixel.
- Højde: 400px
Giv derefter skillevæggen en absolut position for at placere den direkte over de andre moduler. Brug Z-indekset til at placere skillevæggen bag de andre moduler.
- Position: Absolut
- Z-indeks: -1
Baggrundsdeler rulleeffekter
Med separatoren på plads er alt, hvad vi skal gøre, at flytte separatoren bag teksten ved hjælp af rulleeffekterne Divi. Til dette design vil vi blot tilføje vandret bevægelse på rullen.
Opdater følgende punkter:
Under fanen Vandret bevægelse ...
kontor
- Aktivér vandret bevægelse: YES
- Start offset: 6 (ved 20%)
- Gennemsnitlig modregning: 0 (ved 40% -60%)
- Slut offset: -6 (ved 80%)
Telefon
- Start offset: 3
- Slutforskydning: -3
Sørg også for at indstille udløseren til bevægelseseffekten i midten af klippet:
- Trigger bevægelseseffekt: midten af elementet
Tilføj sektionsafstand
For at oprette en midlertidig rulleplads til at teste designet skal du tilføje følgende til sektionen:
- Marginal: 80vh over, 80vh nedenfor
endelige tanker
Tekstbaggrundsanimationsdesignene, der vises i denne artikel, vil faktisk fungere fint som et statisk design uden tilføjelse af bevægelse på rullen. De ekstra rulleeffekter fører dog virkelig designet til et helt nyt niveau. Du er velkommen til at eksperimentere med flere farver og effekter!
Jeg kan ikke vente med at høre fra dig i kommentarerne.
Til dit helbred!
