Ovaj vodič dolazi kao dodatak vodiču koji smo napravili prije nekoliko dana. Doista smo vam pokazali kako dodati pomični tekst u stupac na Divi. Danas ćemo vam pokazati kako koristiti istu tehniku, da dodate odjeljak "super heroj" (izraz koji se koristi za dpisati veliko područje web stranice dizajnirano da privuče pozornost i istakne određene elemente).
Počnimo.
Dodajte unaprijed definirani izgled
Da biste dodali izgled svojoj stranici, otvorite izbornik postavki na dnu alata za izradu Divi i kliknite na simbol plus. U skočnom prozoru Load from Library odaberite Job Recruiter Layout Pack. Zatim kliknite za korištenje izgleda početne stranice.
Uklonite dodatni sadržaj s izgledom
Nakon što se prezentacija učita na stranicu, implementirajte wireframe prikaz i uklonite sve sadržaj prezentacije, osim zaglavlja pune širine i odjeljka neposredno ispod njega.
Izrada animacije selekcijskog teksta
Kao što možete vidjeti, riječ „angažirao” već se koristi kao veliki tekst element dizajna u tekstualnom modula u drugom dijelu. Ovaj ćemo tekstualni mod pretvoriti u responzivni element dizajna zvučnika za tekst. Ključ za prilagodbu tekstualnog pravokutnika je osigurati da linija i modul teksta prelaze cijelu širinu prozora preglednika. To možemo učiniti koristeći 100% širinu. Tada za veličinu teksta možemo koristiti jedinicu duljine vw. To će tekst učiniti prilagođenim širini preglednika. Nakon toga primijenit ćemo ista načela koja smo prethodno koristili za ilustraciju našeg jednostavnog primjera pomicanja teksta.
Evo kako to učiniti.
Ažurirajte parametre retka
Kao što je ranije spomenuto, redak mora biti 100% da bi dizajn ovog responzivnog odabira teksta funkcionirao. To omogućava naš tekst modul za korištenje jedinice duljine VW u odnosu na širinu preglednika. Budući da naš unaprijed definirani izgled već ima liniju sa 100% širine, ne moramo ništa poduzeti.
No, preostale postavke moramo prilagoditi na sljedeći način.
- Marža: -24vw dolje
- Transform translate Y os: -24vw
- Vodoravni preljev: skriven
- Okomiti preljev: skriven
Negativna donja margina uklanja uklanjanje negativnog prostora koji ostaje pri svakom premještanju retka pomoću naredbe transformiraj prevođenje. I moramo sakriti preljev retka za naš efekt teksta odabira.
Ažurirajte dizajn teksta tekstualnog modula
Sada sve što morate učiniti je ažurirati tekstualni modul kako biste ga pretvorili u veliki element dizajna teksta.
Otvorite tekstualni modul i ažurirajte sljedeće:
- Boja teksta teksta: rgba (255,255,255,0.16)
- Veličina teksta teksta: 36vw
- Granica: -100% s lijeve strane, 100% s desne strane
Veličina teksta koristi duljinu jedinice vw, tako da tekst dobro odgovara širini preglednika.
Dodajte animaciju u tekstualni modul
- Stil animacije: dijapozitiv
- Smjer animacije: lijevo
- Trajanje animacije: 10000ms
- Intenzitet animacije: 100%
- Animacija krivulje brzine: linearna
- Ponovite animaciju: petlja
Konačni dizajn
Sada provjerite konačni dizajn.
Završne misli
Tekstni okviri mogu biti praktičan alat za web dizajn. Oni nisu ograničeni na funkcioniranje samo kao tickers. Oni također mogu dodati zanimljiv element animacije vašem web dizajnu. A najbolji dio je to Divi olakšava stvaranje i dizajn svih vrsta lijepih stvari. Nadam se da će vam ovaj vodič pomoći da stvorite jednostavne tekstove za odabir kad god vam zatrebaju.
Nadam se da ćemo se čuti u komentarima.
Na vaše zdravlje!
