Poruszający się, animowany tekst - CSS3
- Data publikacji
- Ostatnio edytowano
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:
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:
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:
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:
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:
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.