Stvaranje pozadinske animacije pomicanja teksta jedinstven je način dodavanja šarenih animiranih tekstura vašem tekstu. web stranica dok korisnik skrola po stranici. S Divi, postupak je iznenađujuće jednostavan nakon što naučite nekoliko ključnih tehnika.
U ovom vodiču koristit ćemo samo snagu ugrađenih parametara Divi za izradu 3 jedinstvena dizajna koji imaju šarenu animaciju pomicanja u pozadini teksta. Čak ćemo vam pokazati kako stvoriti tamnu verziju svakog dizajna za potpuno novi izgled.
Krenimo!
Mogući ishod
Evo pogleda na dizajne koje ćemo danas graditi.
Dizajn 1: Gradijent pozadine teksta s efektom vodoravnog pomicanja
Ovaj prvi dizajn sadržavat će efekt vodoravnog pomicanja koji animira modul separatora u boji iza modula teksta s filtrom zaslona.
Dodajte stupac
Da biste započeli, dodajte redak u jedan stupac u zadani odjeljak.
Dodajte tekstualni modul
Zatim u stupac dodajte novi tekstualni modul.
Sadržaj
Za sadržaj stupac, zalijepite sljedeći HTML kod u okvir sadržaj:
Formatiranje teksta
Zatim ažurirajte dizajn teksta na sljedeći način:
- Boja pozadine: #ffffff
- Stil teksta: TT
- Boja teksta: # 000000
- Veličina teksta: 100 px (radna površina), 40 px (telefon)
- Razmak slova u tekstu: 0.15em
- Visina retka teksta: 1em
- Usklađivanje teksta: središte
- Titula naslova: Merriweather
- Težina naslovnog slova: podebljano
- Stil fonta naslova: TT
- Poravnanje teksta zaglavlja: Sredina
- Boja teksta zaglavlja: # 000000
- Veličina teksta zaglavlja: 200 piksela (radna površina), 80 piksela (telefon)
- Razmak između naslova: 0.15em
- Visina naslovnog retka: 1em
Padding i filter
Sada u tekstualni modul moramo dodati malo popunjavanja i filtar zaslona. Za rad ovog dizajna potreban je filtar jer on omogućava prikaz pozadinskih boja / modova iza teksta.
Za dodavanje i filtriranje ažurirajte sljedeće:
- padding: 15px visok, 20px low
- Način miješanja: Zaslon
Napomena: Način miješanja zaslona najbolje funkcionira s crnim tekstom na bijeloj pozadini. Da želimo koristiti bijeli tekst na crnoj pozadini, koristili bismo način pomnožavanja Množenje.
Gornji i donji separator
Nakon što je naš tekstualni modul dovršen, dodajmo neke odvojenike (iznad i jedan ispod tekstualnog modula) za dodatni dizajnerski element.
Dodajte donji separator
Dodajte novi modul za odvajanje ispod tekstualnog modula.
Veće postavke odvajanja
Otvorite postavke separatora i odaberite NE za prikaz separatora.
Zatim ažurirajte pozadinu i dajte razdjelniku isti način miješanja kao i tekstualni modul, kako slijedi:
- Boja pozadine lijevog gradijenta: # 000000
- Boja pozadinske pregrade na desnoj strani: #ffffff
- Smjer gradijenta: 90deg
- Početna pozicija: 48%
- Krajnji položaj: 0%
- Način miješanja: Zaslon
Zatim ažurirajte visinu razdjelnika na zaslonu telefona na sljedeći način:
- Visina: 15px (telefon)
Dodajte gornji separator
Da biste stvorili gornji razdjelnik, duplicirajte prethodni donji razdjelnik i povucite ga iznad tekstualnog modula pomoću područja prikaza slojeva.
Zatim preokrenite boje na pozadini gradijenta.
Ažuriranje parametara linije
Nakon postavljanja gornjeg i donjeg separatora, ažurirajte parametre linije na sljedeći način:
- Širina oluka: 1 (za uklanjanje donjih margina između modula)
- Maksimalna širina: 600 piksela (za održavanje skladnog dizajna na radnoj površini i tabletu)
- Poravnavanje linija: središte
- Padding: 0px visoko, 0px low
- Vodoravni preljev: skriven
- Okomiti preljev: skriven
Stvorite separator za boju pozadine animiranog teksta
Posljednji element ovog prvog dizajna je razdjelnik koji ćemo koristiti za animiranje boje pozadine teksta na pomicanju. Da biste to učinili, dodajte novi modul za odvajanje ispod donjeg razdjelnika.
Zatim odaberite NE za prikaz separatora.
Postavke pozadinskog razdjelnika
Ažurirajte separator pozadinom gradijenta na sljedeći način:
- Boja pozadine lijevog gradijenta: # e02b20
- Desna boja gradijenta pozadine: # 8300e9
- Smjer gradijenta: 90deg
- Početna pozicija: 30%
- Krajnji položaj: 70%
Želimo da visina separatora bude dovoljno visoka da oboji sav naš tekst u modulu za tekst i gornji i donji separator. Za ovaj dizajn postavite visinu na 400 piksela.
- Visina: 400px
Zatim dajte razdjelniku apsolutni položaj da ga postavi izravno iznad ostalih modula. Pomoću indeksa Z postavite razdjelnik iza ostalih modula.
- Pozicija: Apsolutno
- Z indeks: -1
Efekti pomicanja u pozadini razdjelnika
Sa separatorom na položaju, sve što trebamo učiniti je pomaknuti separator iza teksta koristeći efekte pomicanja Divi. Za ovaj dizajn, jednostavno ćemo dodati horizontalno kretanje na svitku.
Ažurirajte sljedeće stavke:
Pod karticom Horizontalno kretanje ...
Biro
- Uključite vodoravno kretanje: DA
- Početak pomaka: 6 (na 20%)
- Prosječno odstupanje: 0 (pri 40% -60%)
- Završno odstupanje: -6 (pri 80%)
Telefon
- Startni pomak: 3
- Krajnji odmak: -3
Također, svakako postavite okidač za efekt pokreta na sredinu isječka:
- Učinak okidačkog pokreta: sredina elementa
Dodajte razmak odjeljaka
Da biste stvorili privremeni pomični prostor za testiranje dizajna, dodajte sljedeće odjeljku:
- Granica: 80vh iznad, 80vh ispod
Završne misli
Dizajn animacije pozadine teksta prikazan u ovom članku zapravo bi funkcionirao sasvim statično kao statički dizajn bez dodavanja pokreta na pomicanju. Međutim, dodatni efekti pomicanja doista podižu dizajn na potpuno novu razinu. Slobodno eksperimentirajte s više boja i efekata!
Jedva čekam da se čujemo u komentarima.
Na vaše zdravlje!
