Skocz do zawartości


Hej! Zauważyliśmy, że korzystasz z "adblocka".
Chcesz pozbyć się komunikatu? Wystarczy wyłączyć wtyczkę!
Jeśli chcesz swobodnie poruszać się po forum bez reklam możesz zakupić rangę "Premium".
Więcej informacji!
QUZEE

[Poradnik] TypeEffect

Rekomendowane odpowiedzi

QUZEE

Ostatnio większość osób aby urozmaicić wygląd swojej strony chcą dodać do niej tzw. TypeEffect.

Efekt ten pozwala nam na animację tzw. "pisanego" tekstu na naszej stronie.

 

Jak stworzyć taki TypeEffect?


To proste... wystarczy stworzyć nową klasę w pliku style.css

 

Załóżmy że nasza klasa w css nazwie się TypeEffect.

 

Tworzymy klasę TypeEffect:

Spoiler
.typeeffect {
overflow: hidden;
border-right: .15em solid rgb(255, 255, 255); 
white-space: nowrap
margin: 0 auto
letter-spacing: .15em
animation:
typing 4.1s steps(40, end),  /* Czas w którym test ma zostać napisany, steps(40,end) płynność pisanego tekstu */
blink-caret .75s step-end infinite;
}

 

Następnie tworzymy animację:

 

Spoiler
/* Efekt pisania tekstu */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
 
/* Efekt kursora */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: rgb(255, 255, 255); }
}

 

Po stworzeniu animacji w pliku style.css musimy dodać animację do naszej strony. Tworzymy w niej nowego "div".

 

Spoiler
<div class="typeffect">
 
</div>

 

Po stworzeniu nowego "div" wystarczy tylko dodać tekst w dowolnym formacie. U mnie jest to format "h4".

Tekst dodajemy w środku stworzonego przez nas "div"

 

Spoiler
<div class="typeeffect">
<h4>TypeEffect dla Zielonych - tsForum.pl</h4>
</div>

 

To wszystko, teraz wystarczy zrestartować naszą stronę za pomocą CTRL + F5.

 

Uzyskany efekt powinien wyglądać mniej więcej tak: Kliknij aby zobaczyć TypeEffect

Edytowane przez QUZEE

Iu2oTho.png.96f66b26e3491373101dac9dbdc574d2.png

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
QUZEE

Niestety nie mogę edytować posta, aczkolwiek jeśli chce ktoś zobaczyć troszkę zmieniony TypeEffect, zapraszam tutaj https://tshydra.pl


Iu2oTho.png.96f66b26e3491373101dac9dbdc574d2.png

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Dołącz do dyskusji

Możesz dodać zawartość już teraz a zarejestrować się później. Jeśli posiadasz już konto, zaloguj się aby dodać zawartość za jego pomocą.

Gość
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Usuń formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.


  • Ostatnio przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników przeglądających tę stronę.


×

Powiadomienie o plikach cookie