CSS3 - Tworzymy ruchome tło w elemencie HTML

W tej części kursu CSS przyda nam się wiedza o sposobie tworzenia animacji CSS3. Jeżeli nadal nie wiesz jak tworzy się animacje w języku CSS to zajrzyj do działu pierwszego - Selektory czasu animacji.

W tej części kursu CSS utworzymy efekt ruchomego tła, który został zaprezentowany poniżej.

to jest przykładowy element - p - umieszczony w elemencie - div - z ruchomym tłem

Do utworzenia ruchomego tła w elemencie HTML będą nam potrzebne trzy obrazki zapisane w formacie .png (format png umożliwia nam utworzenie przezroczystości w danym obrazku). Wspomniane obrazki zostały umieszczone poniżej.
obrazek - 1
obrazek - 2
obrazek - 3
Tworzenie układu elementów HTML, w którym jeden z nich będzie posiadał ruchome tło, zaczniemy od utworzenia odpowiedniego kodu HTML w części body dokumentu HTML. Nasz kod HTML w części body będzie zawierał dwa elementy HTML, czyli element div oraz element p. Element p będzie umieszczony w elemencie div.


<body>

  <div id="element_z_tlem">
    <p id="akapit">to jest przykładowy element - p - umieszczony w elemencie - div<p>
  </div>

</body>

Dodatkowo dla naszych elementów HTML zostały utworzone unikalne atrybutu id, które wykorzystamy w regułach CSS, które z kolei określą wygląd danego elementu HTML.

Jak dotąd nasz układ elementów HTML prezentuje się następująco:

to jest przykładowy element - p - umieszczony w elemencie - div

W następnym kroku stworzymy reguły CSS, które będą odpowiadały za wygląd poszczególnych elementów HTML, które utworzyliśmy przed chwilą. Nasze reguły CSS jak na razie nie będą zawierały w sobie niczego specjalnego,


#element_z_tlem {
  border:3px solid #EEE;
}

#akapit {
  font-size:24px;
  width:300px;
  margin:84px auto;
  padding:10px;
  border:3px solid #EEE;
  background-color:rgba(255,255,255,0.7);
}

Rezultat:

to jest przykładowy element - p - umieszczony w elemencie - div

Dzięki regułą CSS, które przed chwilą utworzyliśmy, do elementu #element_z_tlem zostało dodane obramowanie o szerokości 3px, stylu solid oraz kolorze #EEE.

Natomiast dla elementu #akapit została określona szerokość (width), marginesy zewnętrzne (margin), marginesy wewnętrzne (padding), obramowanie elementu (border), kolor tła (background-color) oraz wielkość czcionki tekstu (font-size).

Dla właściwości background-color użyliśmy zapisu rgba, dzięki czemu kolor tła w elemencie #akapit będzie posiadał swój własny stopień przezroczystości (0.7), dzięki czemu zobaczymy zawartość znajdującą się pod nim.

Czas wykorzystać obrazki, które zostały zaprezentowane na początku tej części kursu CSS.

W sytuacji gdy chcemy dodać do jakiegoś elementu HTML tło obrazkowe, które ma składać się z jednego lub kilku obrazków, to wykorzystujemy do tego celu właściwość background-image.

Dodajemy właściwość background-image do reguły CSS, która odpowiada za wygląd elementu #element_z_tlem.


#element_z_tlem {
  border:3px solid #EEE;
  background-image:url('http://kodcss.pl/img/para1.png'),
                   url('http://kodcss.pl/img/para2.png'),
                   url('http://kodcss.pl/img/para3.png');
}

Dzięki ostatniej czynności, którą wykonaliśmy, tło naszego elementu #element_z_tlem jest wypełnione trzema obrazkami:

to jest przykładowy element - p - umieszczony w elemencie - div

Czas wprawić w ruch tła obrazkowe, które zostały dodane do elementu #element_z_tlem. Efekt ten uzyskamy dzięki utworzeniu animacji CSS, która została podana poniżej.


@keyframes ruch
{
  0% { background-position:0 0, 0 0, 0 0; }
  100% { background-position:10000px 0, 7500px 0, 5000px 0; }
}

Utworzyliśmy regułę @keyframes, którą nazwaliśmy ruch.

W selektorze czasu animacji 0%, który określa wygląd elementu HTML na początku animacji CSS, umieściliśmy właściwość background-position:0 0, 0 0, 0 0; Wartości 0 0, 0 0, 0 0 określają pozycję początkową trzech pierwszych obrazków, które zostały dodane do elementu HTML, który ma stać się animowanym elementem HTML.

W selektorze czasu animacji 100%, który określa wygląd elementu HTML na końcu animacji CSS, umieściliśmy właściwość background-position:10000px 0, 7500px 0, 5000px 0;

Czas dodać naszą animację ruch do elementu #element_z_tlem.


#element_z_tlem {
  border:3px solid #EEE;
  background-image:url('http://kodcss.pl/img/para1.png'),
                   url('http://kodcss.pl/img/para2.png'),
                   url('http://kodcss.pl/img/para3.png');
  animation:ruch 300s linear infinite alternate;
}

Rezultat:

to jest przykładowy element - p - umieszczony w elemencie - div - z ruchomym tłem

Nasza animacja ruch będzie trwała trzysta sekund (300s), będzie miała stałe tempo (linear), będzie powtarzała się w nieskończoność (infinite), będzie miała odwrotny kierunek powtarzania się (alternate).

Przeglądarka internetowa widząc, że do elementu HTML chcemy dodać animację ruch, sprawdzi w regule @keyframes ruch jakie właściwości CSS mają być animowane w danym elemencie HTML. Widząc zapis 100% { background-position:10000px 0, 7500px 0, 5000px 0; } przeglądarka internetowa będzie starała się zmienić wartości pozycji obrazków, które tworzą tło obrazkowe danego elementu HTML, na te wartości, które zostały podane, czyli 10000px 0, 7500px 0, 5000px 0.

Nasze tła obrazkowe mają różną długość drogi do przebycia, w poziomie, czyli: 10000px, 7500px oraz 5000px, w tym samym czasie 300s, dlatego każde z nich porusza się z inną stałą prędkością.

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


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

    <style>
      #element_z_tlem {
        border:3px solid #EEE;
        animation:ruch 300s linear infinite alternate;
        -webkit-animation:ruch 300s linear infinite alternate; /* dla Google Chrome, Safari, Opera 15+ */
        background-image:url('http://kodcss.pl/img/para1.png'),
                         url('http://kodcss.pl/img/para2.png'),
                         url('http://kodcss.pl/img/para3.png');
      }

      #akapit {
        width:300px;
        margin:84px auto;
        padding:10px;
        border:3px solid #EEE;
        background-color:rgba(255,255,255,0.7);
        font-size:24px;
      }

      /*------------------------ANIMACJA-RUCHOME-TŁO------------------------*/
      @keyframes ruch
      {
        0% {background-position:0 0, 0 0, 0 0;}
        100% {background-position:10000px 0, 7500px 0, 5000px 0;}
      }

      /* dla Google Chrome, Safari, Opera 15+ */
      @-webkit-keyframes ruch
      {
        0% {background-position:0 0, 0 0, 0 0;}
        100% {background-position:10000px 0, 7500px 0, 5000px 0;}
      }
    </style>
  </head>

  <body>

    <div id="element_z_tlem">
      <p id="akapit">
        to jest przykładowy element - p - umieszczony w elemencie - div - z ruchomym tłem
      <p>
    </div>

  </body>
</html>

W następnej części kursu CSS dowiemy się w jaki sposób umieścić element HTML poza oknem przeglądarki internetowej tak, aby móc go zobaczyć w całości, gdy najedziemy na jego krawędź kursorem myszki.