Efekt pisania tekstu na stronie internetowej – animacje CSS

Dzisiaj wracam do tematyki animacji jakich można użyć na stronie internetowej. Do tej pory pokazałam takie dość klasyczne animacje głównie na obrazkach i grafikach. Tym razem na swój warsztat wezmę więc tekst.

To ostatnio dość popularny typ animacji, albo po prostu mam szczęście na niego wpadać. Trudno powiedzieć. Tak czy inaczej efekt wydał mi się dość ciekawy, na tyle by o nim wspomnieć.

Jak wykonać animację tekstu z pomocą CSS?

Oczywiste na początek potrzebujemy mieć jakiś tekst, który będziemy animować. Przydatna też z pewnością okaże się wiedza z tworzenia animacji z pomocą CSS. Dlatego warto sobie tę wiedzę odświeżyć mimo, że raczej dotyczy ona elementów blokowych.

Przykład – pojawiającego się tekstu w CSS:

Do bardziej zaawansowanego efektu będziemy już potrzebować już JS.

Przykładowy tekst:

css writing text animation

źródła:

https://css-tricks.com/snippets/css/typewriter-effect/

Efekt pisania tekstu na stronie internetowej – animacje CSS
aurelia

Recent Posts

Mity o marce osobistej, które warto znać

Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…

1 tydzień ago

Jakie zawody zastąpi AI? Czy mamy się czego bać?

Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…

2 tygodnie ago

Widmo Brockenu – co to jest?

Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…

2 miesiące ago

Relikwie: jak zdobywano, sprzedawano i podrabiano święte przedmioty

Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…

2 miesiące ago

Poznaj 6 powodów, dla których warto posiadać logo

Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…

2 miesiące ago

Dlaczego firmy mylą markę osobistą z firmową

Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…

2 miesiące ago