Å lage en tekstbakgrunnsrulleanimasjon er en unik måte å legge til fargerike animerte teksturer til teksten din. nettstedet Web mens en bruker ruller siden. Med Divi, prosessen er overraskende enkel når du først har lært noen få nøkkelteknikker.
I denne opplæringen vil vi bare bruke kraften til de innebygde parameterne til Divi for å lage 3 unike design som har en fargerik tekstbakgrunnsrullende animasjon. Vi vil til og med vise deg hvordan du lager en mørk versjon av hvert design for et helt nytt utseende.
La oss begynne!
Mulig utfall
Her er en titt på designene vi skal bygge i dag.
Design 1: Bakgrunnsgradient med tekst med horisontal rulleeffekt
Denne første designen har en horisontal rulleeffekt som animerer en farget skillemodul bak en tekstmodul med skjermfilteret.
Legg til en kolonne
For å starte, legg til en rad med en kolonne i standarddelen.
Legg til en tekstmodul
Legg deretter til en ny tekstmodul i kolonnen.
Innhold
for innhold kolonnen, lim inn følgende HTML-kode i boksen innhold:
Formaterer teksten
Oppdater deretter tekstdesignet som følger:
- Bakgrunnsfarge: #ffffff
- Tekst Font Style: TT
- Tekstfarge: # 000000
- Tekststørrelse: 100 px (stasjonær), 40 px (telefon)
- Avstand mellom tekstbokstaver: 0.15 em
- Høyde på tekstlinjen: 1em
- Justering av teksten: senter
- Tittel Font: Merriweather
- Tittel skriftvekt: fet skrift
- Tittel font stil: TT
- Overskriftstekstjustering: Senter
- Topptekstfarge: # 000000
- Topptekststørrelse: 200 px (skrivebord), 80 px (telefon)
- Avstand mellom tittelbokstaver: 0.15 em
- Høyden på tittellinjen: 1em
Polstring og filter
Nå må vi legge til noe polstring og skjermfilter i tekstmodulen. Filteret er nødvendig for at dette designet skal fungere, da det er det som gjør at bakgrunnsfargene / modene kan vises bak teksten.
Oppdater følgende for å legge til fyll og filter:
- polstring: 15px høy, 20px lav
- Blend Mode: Skjerm
Merk: Skjermblandingsmodus fungerer best med svart tekst på hvit bakgrunn. Hvis vi ønsket å bruke hvit tekst på svart bakgrunn, ville vi bruke modusen Multiply blend.
Øvre og nedre separator
Når tekstmodulen vår er fullført, la oss legge til noen separatorer (over og en under tekstmodulen) for et ekstra designelement.
Legg til en nedre separator
Legg til en ny separasjonsmodul under tekstmodulen.
Innstillinger for høyere separasjon
Åpne separatorinnstillingene og velg NO for å vise separatoren.
Oppdater deretter bakgrunnen og gi skillelinjen samme blandingsmodus som tekstmodulen som følger:
- Bakgrunnsfarge på venstre gradient: # 000000
- Bakgrunnsfarge på gradient til høyre: #ffffff
- Gradientretning: 90deg
- Startposisjon: 48%
- Sluttposisjon: 0%
- Blend Mode: Skjerm
Oppdater deretter skillelinjens høyde på telefonskjermen som følger:
- Høyde: 15px (telefon)
Legg til øvre separator
For å opprette den øverste skillelinjen, dupliser den forrige bunndeleren og dra den over tekstmodulen ved å bruke lagvisningsområdet.
Vend deretter fargene på gradientbakgrunnen.
Oppdater linjeparametere
Når våre øvre og nedre separatorer er på plass, oppdaterer du linjeparametrene som følger:
- Rennesteinsbredde: 1 (for å fjerne de nedre marginene mellom modulene)
- Maksimal bredde: 600 piksler (for å holde et sammenhengende design på skrivebordet og nettbrettet)
- Linjejustering: sentrum
- Polstring: 0px høy, 0px lav
- Horisontalt overløp: skjult
- Vertikal overløp: skjult
Lag en skilletegn for bakgrunnsfargen til den animerte teksten
Det siste elementet i dette første designet er skillelinjen som vi bruker til å animere bakgrunnsfargen på teksten på rullen. For å gjøre dette, legg til en ny separasjonsmodul under den nedre deleren.
Velg deretter NO for å vise separatoren.
Innstillinger for bakgrunnsdeler
Oppdater separatoren med en gradientbakgrunn som følger:
- Bakgrunnsfarge på venstre gradient: # e02b20
- Farge på høyre bakgrunnsgradient: # 8300e9
- Gradientretning: 90deg
- Startposisjon: 30%
- Sluttposisjon: 70%
Vi ønsker at høyden på skilletegnet skal være høyt nok til å fargelegge all teksten vår i tekstmodulen og topp- og bunnskillene. For denne designen, sett høyden til 400 px.
- Høyde: 400px
Gi deretter skillelinjen en absolutt posisjon for å plassere den rett over de andre modulene. Bruk Z-indeksen til å plassere skillelinjen bak de andre modulene.
- Posisjon: Absolutt
- Z-indeks: -1
Bakgrunnsdeler rulleeffekter
Med skilletegn på plass, er alt vi trenger å gjøre å flytte skillet bak teksten ved å bruke rulleeffektene til Divi. For dette designet vil vi ganske enkelt legge til horisontal bevegelse på rullen.
Oppdater følgende elementer:
Under fanen Horisontal bevegelse ...
kontor
- Aktiver horisontal bevegelse: YES
- Start offset: 6 (ved 20%)
- Gjennomsnittlig forskyvning: 0 (ved 40% -60%)
- Sluttforskyvning: -6 (ved 80%)
Telefon
- Start offset: 3
- Sluttforskyvning: -3
Sørg også for å sette utløseren for bevegelseseffekten i midten av klippet:
- Trigger bevegelseseffekt: midten av elementet
Legg til seksjonsavstand
Hvis du vil lage et midlertidig rulleområde for å teste designen, legger du følgende til delen:
- Marginen: 80vh over, 80vh under
avslutt~~POS=TRUNC tanker
Tekstbakgrunnsanimasjonsdesignene som vises i denne artikkelen, vil faktisk fungere fint som en statisk design uten å legge til bevegelse på rullen. Imidlertid tar de ekstra rulleeffektene designet til et helt nytt nivå. Eksperimenter gjerne med flere farger og effekter!
Jeg gleder meg til å høre fra deg i kommentarene.
Til helsen din!
