Napisała do mnie koleżanka, że na jakiejś tronie widziała taki bajer, że “tekst na nagłówku strony pojawia się tak, jakby był pisany na komputerze, czyli literka po literce, i to jeszcze z kursorem”. Fakt, z doświadczenia wiem, że ten “prosty trik” – zwłaszcza odpowiednio użyty – potrafi zrobić wrażenie. A co najlepsze, jego wdrożenie jest proste, i to nie tylko na stronie działającej na WordPressie…

Typed, czyli tekst “jakby pisany” na stronie WWW

O ile kilka lat temu takie coś byłoby może i jakimś wyzwaniem, to od dawna mamy ogólnodostępne biblioteki od wszystkiego do wszystkiego, w tym również biblioteki do bibliotek. W tym przypadku można skorzystać choćby z biblioteki typed.js, która sporą część roboty – jak na bibliotekę przystało – zrobi za nas.

Skoro jednak koleżanka pytała o WordPressa, to można pójść jeszcze o krok dalej, i skorzystać z wtyczki, która nie tylko zintegruje bibliotekę typed.js z naszą stroną, ale też całość sprowadzi do wklejenia w odpowiednie miejsce odpowiedniego (krótkiego) kodu (shortcode).

Ale zacznijmy od wizualnego przedstawienia, o czym w ogóle mowa, bo pewnie nie dla każdego jest jasne, o jaki efekt chodzi:

Tak więc, jak już ustalono – mamy bibliotekę typed.js, a że mamy WordPressa, to dodatkowo skorzystamy z wtyczki. I choć wtyczek tego typu jest sporo, to na potrzeby koleżanki i artykułu postanowiłem wybrać jedną. Chwilę się wahałem, ale ostatecznie do wybrania konkretnej wtyczki przekonało mnie skorzystanie z podwójnego dwukropka (::) do oddzielania kolejnych linijek tekstu przez jej autora, bo co jak co, ale podwójny dwukropek w piśmie występuje rzadko (w przeciwieństwie np. do znaku +).

Wtyczka, o której mowa to Animated Typed JS Shortcode (Yongki Agustinus), którą bezpłatnie można pobrać wprost z repozytorium WordPress.org (można też dodać bezpośrednio do WordPressa, co w sumie zalecam, głównie jako wygodniejszą formę).

Wtyczka nie ma żadnych ustawień, a wszystko sprowadza się do wklejenia w odpowiednim miejsciu – gdzie ma wyświetlać się “pisany tekst” – odpowiedniego kodu:

[typedjs]To jest przykładowy tekst...[/typedjs]

To jest podstawowa wersja, czyli jeden tekst (iteracja), w jednorazowym przebiegu. Kod łatwo można zmienić na to, by wyświetlał kolejno kilka różnych tekstów (linijek):

[typedjs]To jest przykładowy tekst - linijka pierwsza::To jest przykładowy tekst - linijka druga::To jest przykładowy tekst - linijka trzecia[/typedjs]

Jeśli chcemy dodatkowo go zapętlić, to dodajemy parametr “loop”:

[typedjs loop=true]To jest przykładowy tekst - linijka pierwsza::To jest przykładowy tekst - linijka druga::To jest przykładowy tekst - linijka trzecia[/typedjs]

Parametrów, z których możemy korzystać, jest jednak znacznie więcej:

• typespeed – szybkość pojawiania się znaków (domyślnie: 50 milisekund, im mniej, tym szybciej)
• startdelay –  zwłoka przed rozpoczęciem animacji (domyślnie: 500 milisekund, im mniej, tym szybciej)
• backspeed – szybkość kasowania znaków (domyślnie: 50 milisekund, im mniej, tym szybciej)
• backdelay – czas po wyświetleniu tekstu do rozpoczęcia kasowania (domyślnie: 500 milisekund, im mniej, tym szybciej)
• smartbackspace – kasowanie tylko innych liter niż w tekście następnym (domyślnie: true (tak))
• shuffle – losowe wyświetlanie tekstów (domyślnie: false (nie))
• fadeout – zanikanie tekstu zamiast kasowania znaków (domyślnie: false (nie))
• fadeoutdelay – zwłoka przy zanikaniu (domyślnie: 500 milisekund, im mniej, tym szybciej)
• loop – wyświetlanie w pętli (domyślnie: false (nie))
• loopcount – liczba pętli (domyślnie: bez limitu)
• showcursor – pokaż/ukryj kursor (domyślnie: true (tak))
• cursorchar – znak używany jako kursor (domyślnie: |)
• class – klasa CSS dla obiektu  (domyślnie: brak)

Do tego w tekście możemy korzystać z tagów HTML, np. tworząc link:

[typedjs]To jest przykładowy tekst, który zawiera również <a href ="https://webinsider.pl">link</a>.[/typedjs]

Wariantów domyślnych oczywiście nie musimy wpisywać, ale gdy byśmy chcieli coś zmienić, to całość mogłaby wyglądać tak:

[typedjs typespeed=80 startdelay=1000 backspeed=100 backdelay=2000 loop=true]To jest przykładowy tekst - linijka pierwsza::To jest przykładowy tekst - linijka druga::To jest przykładowy tekst - linijka trzecia[/typedjs]

Jak widać – nic skomplikowanego, a jak już pisałem, przy odpowiednim wykorzystaniu potrafi zrobić nadal całkiem niezłe wrażenie, i to nie tylko na mojej koleżankę… ;-)