html css trikovi efekat pisace masine


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 9 - Efekat pisaće mašine


Nazad


Efekat pisaće mašine


Efekat pisaće mašine se može koristiti na primer kod izrade animiranih banera koji sadrže samo tekst. Na taj način drži se pažnja posetioca da pročita ceo tekst koji se polako razvija iz kursora popust kucanja na pisaćoj mašini. Takodje, ovaj efekat se može primeniti ukoliko se rade obuke gde se polazniku obuke informativni tekst polako razvija i daje korisne informacije kao i dalja uputstva kod učenja. Efekat se definiše preko stilova i implementira se ukoliko je tekst oivičen h1 tag-ovima.

Head


<style type="text/css">
.typewriter h1 {
  overflow: hidden;     /* Omogućava da je sadržaj prazan pre kretanja animacije */
  border-right: .15em solid orange; /* Kursor u vidu linije  */
  white-space: nowrap;     /* Omogućava da je tekst u jednom redu */
  margin: 0 auto;      /* Kako se tekst razvija omogućava efekat scroll-inga */
  letter-spacing: .15em;    /* Razmak slova - ako je potrebno može se promeniti */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* Effect pisaće mašine */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* Efekti kursora */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
</style>

Body


<div class="typewriter">
   <h1> Efekat pisaće mašine </h1>
</div>

Prikaz u Browser-u


Efekat pisaće mašine

NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke