Veľké písmená poskytujú rolovacie textové pole webové stránky ktorý čitateľov zaujme užitočnými úryvkami z obsah. Nazývajú sa tiež tickery (alebo novinky) a často sa používajú na zobrazenie stáleho prúdu aktualizácií správ v hornej alebo dolnej časti stránky. . Zvyčajne sa animácia posúvania vykonáva s jedným riadkom obsah v slučke, aby sa informácie zobrazovali opakovane. Bohužiaľ, <marquee>Keďže značka html je zastaraná, pri vytváraní značiek sa dnes spoliehame na CSS a JavaScript. Pomocou Divi však môžete vytvoriť jednoduchý výberový obdĺžnik bez obáv z vlastného kódu.

V tomto tutoriáli vysvetlíme, aké ľahké je vytvoriť jednoduchý výberový text pomocou Divi. Uvidíme dokonca, ako pozastaviť posúvanie animácie textu pri umiestnení kurzora myši a ako pridať veľký posúvací text ako jedinečný prvok návrhu pre vaše hlavičky.

Začnime.

prehľad

Čo potrebujete, aby ste začali

Na začiatok potrebujete nasledujúce kroky:

1. Le Divi téma nainštalované a aktívne
2. Nová stránka vytvorená na vytvorenie úplne od začiatku (vizuálny konštruktor)

Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.

Začiatok počatia

Pre tento prvý príklad vytvoríme jednoduchý textový obdĺžnik pre jeden riadok textu. Za týmto účelom dáme riadku maximálnu šírku so skrytým prepadom. Ďalej pridáme animáciu opakovania snímky do textového modulu obsahujúceho riadok textu tak, aby sa opakovane posúval do riadku, napríklad ako obdĺžnik.

Tu je postup, ako to urobiť.

Začnite vytvorením pravidelnej sekcie s radom stĺpca.

Pred pridaním modulu potom aktualizujte riadok s pevnou šírkou, tieňovým poľom a polomerom, a to nasledovne:

• Maximálna šírka: 200px
• Čalúnenie: 10px hore, 10px dole
• Okrúhle rohy: 10px
• Tieň poľa: pozri snímku obrazovky
• Horizontálny prepad: skrytý
• Vertikálny prepad: skrytý

Pridajte textový modul

Po dokončení riadku pridajte do riadku nový textový modul.

Potom aktualizujte obsah tela s jedným riadkom textu. Zatiaľ sa uistite, že sa riadok textu nerozdelí na ďalší riadok.

• Telo: „Toto je veta“

Návrh textových modulov

Aktualizujte parametre návrhu textového modulu takto:

• Marža: -100% vľavo, 100% vpravo

Toto umiestni textový modul mimo ľavú časť riadku. Pretože skrytá viditeľnosť čiary je skrytá, modul bude skrytý, kým nepridáme animáciu, aby bola viditeľná.

• Štýl animácie: Snímka
• Smer animácie: Vpravo
• Trvanie animácie: 5000 XNUMX ms
• Intenzita animácie: 100%
• Začiatočná nepriehľadnosť animácie: 100%
• Animácia krivky rýchlosti: lineárna
• Opakovaná animácia: Slučka

výsledok

Pozrime sa teraz na výsledok.

Vytváranie dlhších textových riadkov

V dizajne jednoduchého výberu textu vyššie sme obmedzili šírku textového riadku na rovnakú šírku ako riadok. Ak však chceme vytvoriť dlhší riadok textu s rovnakou šírkou, budeme musieť nastavenia trochu doladiť.

Najskôr v textovom module a text tela nahraďte nasledujúcim textom:

Toto je fáza s odkazom

Pridajte väčšiu šírku a okraj, aby sa zmestil do najdlhšieho riadku textu

Ako ste si mohli všimnúť, text je namiesto jedného rozdelený na tri riadky.

Preto musíme upraviť okraj a intenzitu animácie.

• Šírka: 207%
• Marža: -207% vľavo, 207% vpravo
• Intenzita animácie: 75%

Trik spočíva v zväčšení šírky a aktualizácii hodnôt okrajov tak, aby na jeden riadok textu zostalo len toľko miesta. Potom upravte intenzitu animácie tak, aby medzi zacyklenou animáciou nevznikal veľký zlom.

výsledok

Toto je konečný výsledok.

Pozastaviť animáciu textu výberu pri umiestnení kurzora myši

Pretože tento výber označenia obsahuje odkaz, pre používateľov bude ťažké kliknúť na odkaz pri pohybe. Do textového modulu však môžeme pridať malý útržok css, ktorý pozastaví animáciu pri prechode kurzorom myši.

Ak chcete pozastaviť animáciu pri umiestnení kurzora myši, pridajte útržok CSS

Ak chcete pridať útržok css, otvorte nastavenia textového modulu a do hlavného prvku pridajte nasledujúci vlastný kód CSS pod kartou umiestnenia kurzora myši :

animation-play-state: paused;

Konečný výsledok

Teraz si pozrite konečný výsledok. Upozorňujeme, že animácia textu sa zastaví, keď kurzor myši prejde nad textom a umožní používateľovi kliknúť na odkaz.

To je z tohto tutoriálu všetko, dúfam, že vás naučilo, ako na text Divi pridať posúvací text.