Velika slova teksta daju pomični tekstualni okvir za vaš web stranica koji zaokuplja čitatelje korisnim izvatcima iz sadržaj. Nazivaju se i tickers (ili tickers vijesti) i često se koriste za prikaz stalnog toka ažuriranih vijesti na vrhu ili dnu stranice. . Obično se animacija pomicanja izvodi s jednom linijom sadržaj u petlji tako da se informacije prikazuju više puta. Nažalost, <marquee>Budući da je html oznaka zastarjela, danas se za stvaranje marketa oslanjamo na CSS i JavaScript. Međutim, s Divi možete stvoriti jednostavan pravokutnik za odabir bez brige o prilagođenom kodu.

U ovom uputstvu objasnit ćemo kako je jednostavno stvoriti jednostavan odabirni tekst pomoću Divija. Vidjet ćemo čak i kako pauzirati pomicanje animacije teksta pri prelasku pokazivača i kako dodati veliki pomični tekst kao jedinstveni element dizajna za zaglavlja.

Počnimo.

pregled

Što trebate za početak

Da biste započeli, trebate sljedeće:

1. Le Divi tema instaliran i aktivan
2. Nova stranica stvorena za izgradnju od nule na prednjem dijelu (vizualni konstruktor)

Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.

Početak začeća

Za ovaj prvi primjer stvorit ćemo jednostavan pravokutnik teksta za jedan redak teksta. Da bismo to učinili, dat ćemo retku maksimalnu širinu sa skrivenim preljevom. Dalje, dodati ćemo petlju animacije klizanja tekstualnom modulu koji sadrži liniju teksta tako da više puta klizi u liniju, poput pravokutnika.

Evo kako to učiniti.

Započnite stvaranjem redovnog odjeljka s retkom stupca.

Zatim, prije dodavanja modula, ažurirajte red fiksnom širinom, okvirom sjene i radijusom, na sljedeći način:

• Maksimalna širina: 200px
• Tapaciranje: 10px na vrhu, 10px na dnu
• Okrugli uglovi: 10px
• Box Shadow: pogledajte snimak zaslona
• Vodoravni preljev: skriven
• Okomiti preljev: skriven

Dodajte tekstualni modul

Kad je redak dovršen, dodajte novi tekstualni modul.

Zatim ažurirajte sadržaj tijela s jednim redom teksta. Za sada pazite da se redak teksta ne podijeli u drugi redak.

• Tijelo: "Ovo je rečenica"

Dizajn tekstualnog modula

Ažurirajte parametre dizajna tekstualnog modula na sljedeći način:

• Granica: -100% s lijeve strane, 100% s desne strane

Ovo pozicionira tekstualni modul izvan lijeve strane retka. Budući da je skrivena vidljivost linije skrivena, modul će biti skriven dok ne dodamo animaciju kako bi bila vidljiva.

• Stil animacije: dijapozitiv
• Smjer animacije: Tačno
• Trajanje animacije: 5000ms
• Intenzitet animacije: 100%
• Pokretanje neprozirnosti animacije: 100%
• Animacija krivulje brzine: linearna
• Ponovite animaciju: petlja

rezultat

Da vidimo sada rezultat.

Izrada dužih linija teksta

U gornjem jednostavnom dizajnu teksta za odabir ograničili smo širinu retka teksta na istu širinu kao i linija. Međutim, ako želimo stvoriti duži redak teksta iste širine, morat ćemo malo podesiti postavke.

Prvo, na modulu teksta zamijenite tijelo teksta sa sljedećim:

Ovo je faza s vezom

Dodajte više širine i margine kako bi stali u najduži redak teksta

Kao što ste mogli primijetiti, tekst je umjesto u jedan podijeljen u tri retka.

Stoga moramo prilagoditi marginu i intenzitet animacije.

• Širina: 207%
• Granica: -207% s lijeve strane, 207% s desne strane
• Intenzitet animacije: 75%

Trik je ovdje povećati širinu i ažurirati vrijednosti margina tako da ostane dovoljno prostora za jedan redak teksta. Zatim prilagodite intenzitet animacije tako da nema velike pauze između petlje.

rezultat

Evo konačnog rezultata.

Pauzirajte animaciju teksta odabira prilikom prelaska mišem

Budući da ovaj odabirni pravokutnik uključuje vezu, korisnicima će biti teško kliknuti vezu dok se kreću. Međutim, u tekstualni modul možemo dodati mali css isječak koji će zaustaviti animaciju prilikom zadržavanja pokazivača.

Dodajte isječak CSS-a da biste zaustavili animaciju prilikom prelaska mišem

Da biste dodali isječak css, otvorite postavke tekstualnog modula i dodajte sljedeći prilagođeni CSS kôd glavnom elementu ispod kartice lebdenja :

animacija-igra-stanje: pauzirano;

Konačni rezultat

Sada pogledajte krajnji rezultat. Imajte na umu da se animacija teksta zaustavlja kada se pokazivač zadrži iznad teksta, što korisniku omogućuje da klikne na vezu.

To je sve za ovaj vodič, nadam se da vas je naučio kako dodati pomični tekst na Divi.