Envato Elements - pobierasz co chcesz, ile chcesz

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ę).

W podanych poniżej przykładach krótkich kodów (shortcode) między nawiasami kwadratowymi a tekstem wstawiłem spacje, których prawidłowo nie powinno tu być, ale nie chcę, by zamiast tekstu zostały wykonane krótkie kody w treści tego artykułu.

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ę… ;-)

(!) Zgłoś błąd na stronie