Jak ozvláštnit úvodní sekci webu, která vám (nebo klientovi) přijde příliš statická? Nabízí se použít video, to ale značně snižuje rychlost načítání. Místo toho můžete do hero sekce umístit obrázek a rozpohybovat jej pomocí CSS animací, které prohlížeč nezatíží tolik.
Obsah článku
Zvětšující se obrázek (DIVI)
Následující návod vznikl pro komunitu Madgaleny Bouškové S webařkou za zády. Ukazuje specifické použití jedné konkrétní animace v builderu DIVI. CSS animace se však dají použít kdekoli využíváte CSS (tedy na jakékoli webové stránce).
1. Sekce
Otevřete stránku v builderu a vytvořte novou sekci. V nastavení jděte na Advanced > Custom CSS a vložte následující kód:
selector { overflow: hidden; }
Tímto kódem prohlížeči říkáte, ať schová vše, co se ocitne mimo hranice sekce (například okraje zvětšujícího se obrázku). Pokud byste tuto část vynechali, zvětšující se obrázek by vám rozšiřoval stránku.
V sekci následně vytvořte dva řádky.

2. Řádek 1
U prvního řádku umístěte na pozadí obrázek a nastavte výšku na 100vh a šířku na 100%. Pohrajte si s šířkou okrajů, aby byl řádek/obrázek přes celou šířku obrazovky.
V části Advanced > Custom CSS pak vložte následující kód:
selector {
animation: zoom-in-zoom-out 20s ease infinite;
}
Název animace (zde “zoom-in-zoom-out”) může být jakýkoli. “20s”, tedy 20 vteřin, je doba, za kterou se animace přehraje. “Ease” napomáhá plynulosti animace. A “infinite” znamená nekonečný počet přehrátí, smyčka. Lze jej nahradit číslem.

3. Řádek 2
Nastavte absolutní pozici prvku: Advanced > Position > Absolute.
Do řádku vložte to, co chcete mít na úvodce. Například nadpis – název stránky, claim, tlačítko.

4. Kód
Jděte do editoru vlastního kódu: Divi > Theme Options > Custom CSS. Vložte následující kód:
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.3, 1.3);
}
100% {
transform: scale(1, 1);
}
Název animace (zde “zoom-in-zoom-out”) musí být stejný jako u prvního řádku.

V tomto kousku kódu říkáme prohlížeči, že daný prvek má přiřazenou animaci. Na začátku smyčky animace (0 %) budou jeho rozměry nezměněné (scale(1, 1), čísla jsou pro šířku a výšku). V půlce animace (50 %) budou jeho rozměry 1.3x větší. Na závěr animace (100 %) budou rozměry opět nezměněné.
Přechody mezi jednotlivými velikostmi jsou plynulé. Pokud by však velikost obrázku nebyla na začátku a na konci animace stejná, obrázek by se po skončení jedné smyčky zmenšil skokově – což pravděpodobně nechcete.
Zvětšení při najetí myši (DIVI)
Stejný efekt lze použít i při naletí myši na prvek (hover).
1. Vytvořte v builderu následující rozložení: Sekce > Řádek > Obrázek. Obrázek musí být přes celou šířku i výšku řádku (šířka, výška 100 %).

2. U řádku nastavte vnitřní okraje na 0. Pak jděte do části Advanced > Custom CSS a vložte následující kód:
selector { overflow: hidden; }

3. U obrázku jděte na Design > Transform > Hover. Nastavte velikost na 130% (nebo jakékoli jiné číslo).

Výsledek vypadá takto:
Příklady použití
CSS animace v úvodní sekci webu jsem zatím využila na dvou projektech. V případě webu IT společnosti Orbitus se jednalo o nahrazení videa z fotobanky, kde klient chtěl místo Londýna Prahu. U developera DBD Group byl zase jeden z hlavních klientových požadavků, aby web byl “v pohybu”.
Mnoho zdaru při animování! 🙂