Wielkie litery zapewniają przewijane pole tekstowe do twojego Witryna internetowa który angażuje czytelników pomocnymi fragmentami treść. Nazywa się je również paskami informacyjnymi (lub paskami wiadomości) i często są używane do wyświetlania ciągłego strumienia aktualizacji wiadomości na górze lub na dole strony. . Zwykle animacja przewijania odbywa się za pomocą jednej linii treść w pętli, dzięki czemu informacja będzie wyświetlana wielokrotnie. Niestety <marquee>Ponieważ znacznik html jest przestarzały, obecnie używamy CSS i JavaScript do tworzenia markiz. Jednak dzięki Divi możesz utworzyć prosty prostokąt wyboru bez martwienia się o niestandardowy kod.

W tym samouczku wyjaśnimy, jak łatwo jest utworzyć prosty tekst wyboru za pomocą Divi. Zobaczymy nawet, jak wstrzymać animację przewijania tekstu po najechaniu kursorem i jak dodać duży przewijany tekst jako unikalny element projektu do nagłówków.

Zacznijmy.

badanie

To, czego potrzebujesz, aby zacząć

Aby rozpocząć, potrzebujesz:

1. Le Motyw Divi zainstalowany i aktywny
2. Nowa strona stworzona do tworzenia od zera w interfejsie użytkownika (konstruktor wizualny)

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Początek poczęcia

W tym pierwszym przykładzie utworzymy prosty prostokąt tekstowy dla jednej linii tekstu. Aby to zrobić, damy wierszowi maksymalną szerokość z ukrytym przepełnieniem. Następnie dodamy zapętloną animację slajdu do modułu tekstowego, który zawiera wiersz tekstu, tak aby wielokrotnie wsuwał się w linię, jak prostokąt.

Oto jak to zrobić.

Zacznij od utworzenia zwykłej sekcji z rzędem kolumny.

Następnie przed dodaniem modułu zaktualizuj wiersz o stałą szerokość, pole cienia i promień w następujący sposób:

• Maksymalna szerokość: 200px
• Tapicerka: 10px u góry, 10px u dołu
• Zaokrąglone rogi: 10px
• Box Shadow: patrz zrzut ekranu
• Przelew poziomy: ukryty
• Przelew pionowy: ukryty

Dodaj moduł tekstowy

Po zakończeniu wiersza dodaj nowy moduł tekstowy do wiersza.

Następnie zaktualizuj treść treści za pomocą jednej linii tekstu. Na razie upewnij się, że wiersz tekstu nie dzieli się na inny wiersz.

• Body: „To jest zdanie”

Projekt modułu tekstowego

Zaktualizuj parametry projektu modułu tekstowego w następujący sposób:

• Margines: -100% po lewej, 100% po prawej

Spowoduje to umieszczenie modułu tekstowego poza lewą krawędzią wiersza. Ponieważ ukryta widoczność linii jest ukryta, moduł będzie ukryty, dopóki nie dodamy animacji, aby był widoczny.

• Styl animacji: slajd
• Kierunek animacji: w prawo
• Czas trwania animacji: 5000 ms
• Intensywność animacji: 100%
• Animacja Krycie początkowe: 100%
• Animacja krzywej prędkości: liniowa
• Powtórz animację: Loop

Wynik

Zobaczmy teraz wynik.

Tworzenie dłuższych linii tekstu

W powyższym projekcie prostego tekstu wyboru ograniczyliśmy szerokość linii tekstu do tej samej szerokości co linia. Jeśli jednak chcemy zrobić dłuższą linię tekstu o tej samej szerokości, będziemy musieli nieco poprawić ustawienia.

Najpierw w module tekstowym i zamień treść tekstu na:

To jest faza z łączem

Dodaj więcej szerokości i marginesów, aby dopasować je do najdłuższego wiersza tekstu

Jak możesz zauważyć, tekst jest podzielony na trzy wiersze zamiast jednego.

Dlatego musimy dostosować margines i intensywność animacji.

• Szerokość: 207%
• Margines: -207% po lewej, 207% po prawej
• Intensywność animacji: 75%

Sztuczka polega na zwiększeniu szerokości i zaktualizowaniu wartości marginesów, tak aby pozostała wystarczająca ilość miejsca na pojedynczy wiersz tekstu. Następnie dostosuj intensywność animacji, aby nie było dużej przerwy między animacją zapętloną.

Wynik

Oto wynik końcowy.

Wstrzymaj animację tekstu zaznaczenia po najechaniu myszą

Ponieważ ten prostokąt wyboru zawiera łącze, użytkownikom będzie trudno kliknąć łącze podczas poruszania się. Możemy jednak dodać mały fragment kodu CSS do modułu tekstowego, który wstrzyma animację po najechaniu kursorem.

Dodaj fragment kodu CSS, aby wstrzymać animację po najechaniu kursorem

Aby dodać fragment kodu CSS, otwórz ustawienia modułu tekstowego i dodaj następujący niestandardowy kod CSS do elementu głównego pod zakrętką :

animacja-stan-odtwarzania: wstrzymany;

Ostateczny wynik

Teraz sprawdź efekt końcowy. Zwróć uwagę, że animacja tekstu zatrzymuje się, gdy kursor najedzie na tekst, umożliwiając użytkownikowi kliknięcie łącza.

To wszystko w tym samouczku, mam nadzieję, że nauczył Cię, jak dodać przewijany tekst w Divi.