Animace nadpisu vlnkou

V případě, že potřebujete nějak zvýraznit nadpis animací, zde je jednoduchý návod, jak si upravit element HTML v Elementoru.

Návod je praktikovatelný i na jiné programy, protože se skládá jak z HTML, tak ze stylování pomocí CSS. Tedy nejste omezeni jen na Elementor, ale můžete jej použít přimo do Vašeho programovaného projektu, anebo například ve WordPressu.

Opět jsou u funkcí mezi /* možné úpravy dle Vašich potřeb*/, které následně doporučuji vymazat!

Pokud si chcete vložit tento kód do Vašeho projektu, musíme si ještě upřesnit několik detailů.

Při kopírování a vložení do “custom CSS” je možné udělat ještě několik základních úprav.

Postupujte prosím takto:

Vytvořte pomocí elementu HTML vlatní nadpis, kterí v našem případě je slovo “PŘIPRAVUJEME” s váhou nadpisu H2, a to si upravte opět podle Vašich potřeb.
Vložte HTML kod níže, kde jsou napsána jednotlivá písmena, která pak v nadpisu vytvářejí slovo v nadpisu. Vše je v prvním obrázku níže.
Zkopírujte kód HTML, který je vložen hned pod obrázkem. Doporučuji využít funkci, která se objeví při najetí myši v pravém horním rohu na obrazovce “Copy”.
Kod vložte pod záložkou “Obsah” v HTML elementu.
Přejděte na záložku “Pokročilé” a na úplném konci dole se nachází funkce pro úpravů zkácených kódů – “custom CSS”.
Vložte kód CSS, který je opět nelépe zkopírovatelný funkcí “Copy” v pravé horní částy vyobrazení kódu a po vložení si upravte hodnoty podle textu nvodu za funkcemi a tedy podle svých představ, například:
- transform: Je funkce v našem případě určená procenty, na jakou velikost se má písmeno zvětšit, tedy v našem případě je to +20%.
- color: Zde si můžete měnit barvu v animaci. Naprosto jednoduchá funkce, ale velmi potřebná, aby barva byla v souladu s designem Vašich stránek.
- animation: Zde je nastavení délky animace, v našem případě 1s. Samozřejmě si můžete upravit délku podle svých představ. Důležité je následně upravit i u jednotlivých písmen funkci animation-delay, a to tak, aby korespondovala s nově nastavenou délkou animace. Pokud byste toto neučinili, animace by byla nepravidelná.
- transform-origin: Nám slouží k tomu, abychom definovali výchozí pozici animace písmen. V kódu máme nastaveno “bottom”, tedy odspodu.
Daší úpravu můžete například udělat v barvě původního textu atd. Vše je pak na Vaší hravosti.

Pro větší přehled jse Vám přidal popisky k funkcím k nastavení funkcí přímo na řádky do/za kód. Poznámky si následně, jak jsem již zmiňoval, prosím vymažte.

Další úpravy a nastavení již nechám na Vaší fantazii.

PŘIPRAVUJEME

Toto je kod, který zajistí, aby při pohybu animace nepůsobila na rozložení stránky.

Toho jsme dosáhli tím, že se každé písmeno bude pohybovat jen v rámci svého boxu, aniž by ovlivňovala okolní obsah.

Tedy je přidána vlastnost:

line-height: 0; na kontejner a

line-height: normal; tedy na jednotlivé

span prvky, aby se zabránilo vertikálním posunům.

Celý kód by nebyl funkční bez správného zapsaní stylování pod záložkou “Pokročilé”, kde v sekci “Vlastní CSS”, (custom CSS) kam je potřeba vložit níže vytvořený kód.

Prosím, pro kopírování použujte tlačítko “Copy”, které se objeví po nájezdu myši v pravém horním rohu tabulky s kódem.

Máte k dispozici i dvě další varianty na vyzkoušení.

U prvního kódu jsou i popsány jednotlivé funkce, které můžete upravovat dle vlastních představ.

Připravený HTML kód

				
					<h2 class="animated-heading">
  <span>P</span><span>Ř</span><span>I</span><span>P</span><span>R</span><span>A</span><span>V</span><span>U</span><span>J</span><span>E</span><span>M</span><span>E</span>
</h2>

Připravený CSS kód s funkcí animace

				
					@keyframes animate-letter {
  0%, 100% {
    transform: scale(1);
    color: initial; /* Původní barva, lze měnit */
  }
  50% {
    transform: scale(1.2); /* Zvětšení na o 20% */
    color: #998370; /* Barva pro změnu */
  }
}

.animated-heading {
  display: flex;
  justify-content: center;
  line-height: 0; /* Zabraňuje vertikálnímu pohybu */
}

.animated-heading span {
  display: inline-block;
  line-height: normal; /* Obnovuje normální výšku pro pole písmen */
  animation: animate-letter 1s infinite ease-in-out; /* Změna délky animace na 1s */
  transform-origin: bottom; /* Zvětšování odspodu */
}

.animated-heading span:nth-child(1) { animation-delay: 0s; }
.animated-heading span:nth-child(2) { animation-delay: 0.1s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(3) { animation-delay: 0.2s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(4) { animation-delay: 0.3s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(5) { animation-delay: 0.4s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(6) { animation-delay: 0.5s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(7) { animation-delay: 0.6s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(8) { animation-delay: 0.7s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(9) { animation-delay: 0.8s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(10) { animation-delay: 0.9s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(11) { animation-delay: 1s; } /* Úprava zpoždění pro zkrácení na 1s */
.animated-heading span:nth-child(12) { animation-delay: 1.1s; } /* Úprava zpoždění pro zkrácení na 1s */

Další alternativy CSS kódů s funkcí animace nadpisu

Další připravený CSS kód s funkcí animace se změnou v délce trvání a pozice počátku zvětšení pisma.

Pro plynulost animace v tomto kódu je použita funkce ease-in-out, (řádek 21), tedy můžete jej také vyzkoušet:

				
					@keyframes animate-letter {
  0%, 100% {
    font-size: 100%;
    color: initial;
  }
  50% {
    font-size: calc(100% + 5px);
    color: #998370;
  }
}

.animated-heading {
  display: flex;
  justify-content: center;
  line-height: 0;
}

.animated-heading span {
  display: inline-block;
  line-height: normal;
  animation: animate-letter 2s infinite ease-in-out;
}

.animated-heading span:nth-child(1) { animation-delay: 0s; }
.animated-heading span:nth-child(2) { animation-delay: 0.2s; }
.animated-heading span:nth-child(3) { animation-delay: 0.4s; }
.animated-heading span:nth-child(4) { animation-delay: 0.6s; }
.animated-heading span:nth-child(5) { animation-delay: 0.8s; }
.animated-heading span:nth-child(6) { animation-delay: 1s; }
.animated-heading span:nth-child(7) { animation-delay: 1.2s; }
.animated-heading span:nth-child(8) { animation-delay: 1.4s; }
.animated-heading span:nth-child(9) { animation-delay: 1.6s; }
.animated-heading span:nth-child(10) { animation-delay: 1.8s; }
.animated-heading span:nth-child(11) { animation-delay: 2s; }
.animated-heading span:nth-child(12) { animation-delay: 2.2s; }

A nakonec CSS kód s funkcí animace se změnou v délce trvání opět na 2 sekundy a pro plynulost animace v tomto kódu je použita jiná funkce pro “ještě jemnější” přechody.

Pokud tedy chcete, můžete experimentovat s funkcí cubic-bezier, (řádek 21), je jen na Vás, co Vám bude více vyhovovat, kód je zde:

				
					@keyframes animate-letter {
  0%, 100% {
    font-size: 100%;
    color: initial;
  }
  50% {
    font-size: calc(100% + 5px);
    color: #998370;
  }
}

.animated-heading {
  display: flex;
  justify-content: center;
  line-height: 0;
}

.animated-heading span {
  display: inline-block;
  line-height: normal;
  animation: animate-letter 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.animated-heading span:nth-child(1) { animation-delay: 0s; }
.animated-heading span:nth-child(2) { animation-delay: 0.2s; }
.animated-heading span:nth-child(3) { animation-delay: 0.4s; }
.animated-heading span:nth-child(4) { animation-delay: 0.6s; }
.animated-heading span:nth-child(5) { animation-delay: 0.8s; }
.animated-heading span:nth-child(6) { animation-delay: 1s; }
.animated-heading span:nth-child(7) { animation-delay: 1.2s; }
.animated-heading span:nth-child(8) { animation-delay: 1.4s; }
.animated-heading span:nth-child(9) { animation-delay: 1.6s; }
.animated-heading span:nth-child(10) { animation-delay: 1.8s; }
.animated-heading span:nth-child(11) { animation-delay: 2s; }
.animated-heading span:nth-child(12) { animation-delay: 2.2s; }

Místo pro zvědavé medvědy