Efekt pisania tekstu na stronie internetowej – animacje CSS

Czas czytania: < 1 minut

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/

Aurelia Sypniewska

W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go