Objekt v pohybu + změna barvy

Pokud máte v úmyslu přidat na stránky objekty v pohybu, tak k tomu můžete použít kód níže.

Výsledek je buď tento, kde například šířka objektu je 150px a výška 3px – v kódu řádek 12. až 14. pod: width: 150px; height: 5px;.

A co se animace týče, můžete upravit délku pohybu pod “moveBack“, kde si určíte dobu pohybu mezi počátečním a konenčným bodem.

A také je možné nastavit délku změny přechodu mezi barvami, a to pod “moveAndChangeColor“.

Animace objektu

				
					<!DOCTYPE html>
<html>
<head>
  <title>Animace objektu</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      }

    .moving-object {
      width: 150px; /* šířka v pixelech, kterou můžete dle potřeby upravit */

      height: 5px; /* výška v pixelech, kterou můžete dle potřeby upravit */
      background-color: #5191B4; /* Zde je možné měnit barvu */
      position: relative; /* pozicování lze upravit tady */
      animation: moveAndChangeColor 15s linear infinite, moveBack 20s linear infinite;
    }

    @keyframes moveAndChangeColor {
      0%, 100% {
        left: 0;
        background-color: #5191B4; /* Změna barvy */
      }
      50% {
        left: calc(100% - 150px);
        background-color: #60B819; /* Změna barvy */
      }
    }

    @keyframes moveBack {
      0%, 100% {
        left: calc(100% - 150px);
      }
      50% {
        left: 0;
      }
    }
  </style>
</head>
<body>
  <div class="moving-object"></div>
</body>
</html>

TIP! – Kód pouze zkopírujte (nejlépe použitím aktivního odkazu vpravo nahoře s označením “Copy”) a vložte do objektu, na který jej chcete použít.

V Elementoru zvolte element “zkrácený kod”.

Následně vložíte kód a odkaz je hotový.

Úpravy pak můžete provádět přímo v editaci kódu.

Místo pro zvědavé medvědy

Objekt v pohybu + změna barvy