Velká písmena vám poskytují rolovací textové pole Webové stránky který čtenáře zaujme užitečnými úryvky z obsah. Nazývají se také tickery (nebo novinky) a často se používají k zobrazení stálého proudu aktualizací zpráv v horní nebo dolní části stránky. . Obvykle se animace posouvání provádí s jedním řádkem obsah ve smyčce, aby se informace zobrazovaly opakovaně. Bohužel, <marquee>Jelikož je značka html zastaralá, spoléháme se při vytváření značek na CSS a JavaScript. S Divi však můžete vytvořit jednoduchý obdélník výběru, aniž byste se museli starat o vlastní kód.

V tomto tutoriálu vysvětlíme, jak snadné je vytvořit jednoduchý výběrový text pomocí Divi. Uvidíme dokonce, jak pozastavit posouvání animace textu při najetí myší a jak přidat velký posouvající se text jako jedinečný designový prvek pro vaše záhlaví.

Začněme.

přehled

Co potřebujete, abyste mohli začít

Chcete-li začít, potřebujete následující:

1. Le Divi téma nainstalované a aktivní
2. Nová stránka vytvořená k vytvoření od začátku na front-endu (vizuální konstruktér)

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Začátek početí

V tomto prvním příkladu vytvoříme jednoduchý textový obdélník pro jeden řádek textu. K tomu uděláme řádku maximální šířku se skrytým přetečením. Dále přidáme smyčkovou animaci snímků do textového modulu obsahujícího řádek textu tak, aby se opakovaně zasunul do řádku, jako obdélník.

Zde je návod, jak to udělat.

Začněte vytvořením pravidelné sekce s řadou sloupce.

Poté před přidáním modulu aktualizujte řádek s pevnou šířkou, stínovým rámečkem a poloměrem, například:

• Maximální šířka: 200px
• Čalounění: 10px nahoře, 10px na dně
• Kruhové rohy: 10px
• Shadow Box: viz screenshot
• Horizontální přetečení: skryté
• Vertikální přetečení: skryté

Přidejte textový modul

Po dokončení řádku přidejte do řádku nový textový modul.

Poté aktualizujte obsah těla s jedním řádkem textu. Prozatím se ujistěte, že se řádek textu nerozdělí na další řádek.

• Body: "Toto je věta"

Návrh textového modulu

Aktualizujte parametry návrhu textového modulu následujícím způsobem:

• Marže: -100% vlevo, 100% vpravo

Toto umístí textový modul mimo levou část řádku. Protože skrytá viditelnost čáry je skrytá, modul bude skrytý, dokud nepřidáme animaci, aby byla viditelná.

• Styl animace: Snímek
• Směr animace: Správně
• Délka animace: 5000 XNUMX ms
• Intenzita animace: 100%
• Animace Počáteční krytí: 100%
• Animace křivky rychlosti: lineární
• Opakovaná animace: Smyčka

Výsledek

Podívejme se nyní na výsledek.

Vytváření delších textových řádků

Ve výše uvedeném jednoduchém výběru textu jsme omezili šířku textového řádku na stejnou šířku jako řádek. Pokud však chceme vytvořit delší řádek textu se stejnou šířkou, budeme muset nastavení trochu vylepšit.

Nejprve v textovém modulu nahraďte text textu následujícím textem:

Toto je fáze s odkazem

Přidejte větší šířku a okraj, aby se vešel na nejdelší řádek textu

Jak si možná všimnete, text je místo jednoho rozdělen do tří řádků.

Proto musíme upravit okraj a intenzitu animace.

• Šířka: 207%
• Marže: -207% vlevo, 207% vpravo
• Intenzita animace: 75%

Trik je zde zvětšit šířku a aktualizovat hodnoty okrajů tak, aby na jeden řádek textu zbylo jen dost místa. Poté upravte intenzitu animace tak, aby mezi smyčkovou animací nedošlo k velké přestávce.

Výsledek

Zde je konečný výsledek.

Pozastavit animaci výběru textu při najetí myší

Protože tento výběrový obdélník obsahuje odkaz, bude pro uživatele obtížné kliknout na odkaz při přesunu. Do textového modulu však můžeme přidat malý fragment css, který pozastaví animaci při přechodu myší.

Přidáním fragmentu CSS pozastavíte animaci při najetí myší

Chcete-li přidat fragment css, otevřete nastavení textového modulu a přidejte následující vlastní kód CSS do hlavního prvku pod kartou přechodu :

animation-play-state: paused;

Konečný výsledek

Nyní zkontrolujte konečný výsledek. Pamatujte, že animace textu se zastaví, když kurzor umístíte na text, což uživateli umožní kliknout na odkaz.

To je pro tento tutoriál vše, doufám, že vás naučilo, jak přidat rolovací text na Divi.