Poruszający się, animowany tekst - CSS3

W tej części kursu CSS utworzymy animowany poruszający się tekst.

Efekt końcowy został zaprezentowany poniżej.

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

Nasz docelowy układ elementów HTML prezentuje poziomy, umieszczony w jednej linii, poruszający się tekst. Aby wykonać taki układ elementów HTML przyda się nam wiedza o elementach pozycjonowanych absolutnie oraz relatywnie, jak również wiedza o animacji CSS3.

Pierwszym krokiem, jaki wykonamy, będzie utworzenie układu elementów HTML w kodzie dokumentu HTML, w części body.

<body>

  <div id="blok">
    <p>Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.</p>
  </div>

</body>

Nasz układ elementów HTML to po prostu element p umieszczony w elemencie div. Do elementu div został dodany atrybut id, dzięki czemu wykorzystamy jego wartość, czyli wartość blok, w regułach CSS, które zostały umieszczone poniżej:

#blok {
  width:500px;
  height:2.2em;
  line-height:2.2em;
  margin:0 auto;
  border:3px solid #DDD;
  font-size:1.5em;
  background-color:#EEE;
  overflow:hidden;
}

#blok > p {
  margin:0;
  white-space:nowrap;
}

Nasze reguły CSS nie zawierają w sobie niczego niezwykłego, względem poprzednich części tego kursu CSS. Na szczególną uwagę zasługuje właściwość white-space:nowrap; oraz właściwość overflow:hidden;

Właściwość white-space:nowrap; między innymi sprawia, że tekst umieszczony w danym elemencie HTML (w naszym przykładzie, w elemencie p) nie jest przełamywany na końcu szerokości elementu HTML, dlatego jest on wyświetlony w jednej poziomej linii. Wspomniany tekst będzie mógł być przełamany tylko za pomocą polecenia <br>. Innym efektem wspomnianej właściwości white-space:nowrap; jest to, że możemy wyświetlić kilka białych znaków obok siebie, gdy umieścimy je w elemencie HTML, do którego została dodana właściwość white-space wraz z wartością nowrap.

Właściwość overflow:hidden; ukrywa niemieszczącą się zawartość danego elementu HTML. W naszym przykładzie tą niemieszczącą się zawartością jest tekst elementu p.

Rezultat:

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

Następnym krokiem będzie utworzenie reguły @keyframes, która określi potrzebną animację CSS.

@keyframes przesun
{
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}

Za pomocą reguły @keyframes utworzyliśmy animację CSS o nazwie przesun, która będzie przesuwać element HTML w lewo o 100% jego szerokości, ponieważ właśnie w ten sposób liczona jest wartość procentowa funkcji translateX() właściwości transform.

Zobaczmy co się stanie, gdy do elementu p, w naszym układzie elementów HTML, dodamy w ten sposób utworzoną animację przesun.

#blok > p {
  margin:0;
  white-space:nowrap;
  animation:przesun 30s linear infinite;
}

Rezultat:

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

Niestety, ale szerokość elementu p jest ciągle widziana przez przeglądarkę internetową jako szerokość elementu rodzica, mimo że element p zawiera w sobie długi pionowy tekst, który powiększa rozmiar elementu p. Przez tą źle widzianą szerokość cały efekt jest nieco inny. Wspomniana szerokość elementu p została zaznaczona, dla ułatwienia, czerwonym kolorem tła.

Nasz nowo powstały problem możemy rozwiązać w dość prosty sposób, a mianowicie, dodając właściwość position wraz z wartością absolute do elementu p. Wspomniana właściwość sprawi, że element p stanie się elementem pozycjonowanym absolutnie, a więc jego szerokość będzie automatycznie dopasowywała się do jego zawartości (w naszym przykładzie, do długiego poziomego tekstu).

#blok > p {
  position:absolute;
  margin:0;
  white-space:nowrap;
  animation:przesun 30s linear infinite;
}

Rezultat:

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

Powstał nowy problem, ponieważ niemieszcząca się zawartość elementu #blok stała się widoczna. Stało się tak, ponieważ niemieszczącą się zawartością elementu #blok jest element p, do którego została dodana właściwość position wraz z wartością absolute, przez co nasz element p stał się elementem pozycjonowanym absolutnie, a domyślnie, pozycja, elementu HTML, który jest pozycjonowany absolutnie, jest liczona względem okna przeglądarki internetowej.

Inaczej mówiąc, od tej pory nasz przykładowy element p jest tak jakby zawartością całego okna przeglądarki internetowej, a nie elementu #blok, w którym to elemencie został on umieszczony.

Nowo powstały problem możemy w dość prosty sposób naprawić. Musimy dodać właściwość position wraz z wartością relative do elementu #blok, dzięki czemu wspomniany element #blok stanie się elementem pozycjonowanym relatywnie, dzięki czemu ponownie będzie on "widział" elementy pozycjonowane absolutnie, jako swoją zawartość.

#blok {
  position:relative;
  width:500px;
  height:2.2em;
  line-height:2.2em;
  margin:0 auto;
  border:3px solid #DDD;
  font-size:1.5em;
  background-color:#EEE;
  overflow:hidden;
}

Rezultat:

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

Dodatkowo możemy sprawić, że nasz animowany tekst zostanie odsunięty od lewej krawędzi elementu p o wartość szerokości swojego elementu rodzica, dzięki czemu, gdy animacja będzie wykonywała się po raz pierwszy, zobaczymy, przez chwilę, element bez zawartości, w którym pojawia się animowany tekst.

Inaczej mówiąc, dodajemy właściwość padding-left:110%;, czyli margines wewnętrzny, zarówno do selektora 0% jak i selektora 100%, do naszej wcześniej utworzonej reguły @keyframes.

@keyframes przesun
{
  0% { transform:translateX(0); padding-left:110%; }
  100% { transform:translateX(-100%); padding-left:110%; }
}

Rezultat:

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

Dodatkowo możemy sprawić, aby nasza animacja zatrzymała się (za co jest odpowiedzialna właściwość animation-play-state wraz z wartością paused), gdy umieścimy kursor myszki nad elementem p (za co jest odpowiedzialny selektor hover).

Efekt ten uzyskamy w dość prosty sposób, tworząc następującą regułę CSS:

#blok > p:hover {
  animation-play-state:paused;
}

Finalny rezultat:

Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.

Kod całego dokumentu HTML został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #blok {
        position:relative;
        width:500px;
        height:2.2em;
        line-height:2.2em;
        margin:0 auto;
        border:3px solid #DDD;
        font-size:1.5em;
        background-color:#EEE;
        overflow:hidden;
      }

      #blok > p {
        position:absolute;
        margin:0;
        white-space:nowrap;
        animation:przesun 30s linear infinite;
        -webkit-animation:przesun 30s linear infinite; /* dla Google Chrome, Safari, Opera 15+ */
      }

      #blok > p:hover {
        animation-play-state:paused;
        -webkit-animation-play-state:paused;
      }
	  
      /* ------------ANIMACJA-PRZESUN------------ */
      @keyframes przesun
      {
        0% { transform:translateX(0); padding-left:110%; }
        100% { transform:translateX(-100%); padding-left:110%; }
      }

      @-webkit-keyframes przesun /* dla Google Chrome, Safari, Opera 15+ */
      {
        0% { -webkit-transform:translateX(0); padding-left:110%; }
        100% { -webkit-transform:translateX(-100%); padding-left:110%; }
      }
    </style>
  </head>

  <body>

    <div id="blok">
      <p>Ten tekst w tym elemencie - p - będzie poruszał się, gdy dodamy do niego odpowiednią animację oraz właściwości CSS.</p>
    </div>

  </body>
</html>

W następnej części kursu CSS będziemy kontynuowali temat animacji CSS3.