Divi a CSS animace: Zvětšující se obrázek

Jak může webdesignér ozvláštnit úvodní sekci webu, když působí příliš staticky?
Bára Růžičková • Webdesignérka •
Bára Růžičková • Webdesignérka
💬 Sdílet článek
✏️ 06. 11. 2024 • Aktualizováno 04. 11. 2024
✏️ 06. 11. 2024 • Aktualizace 04. 11. 2024
✏️ 06. 11. 2024
Aktualizace 04. 11. 2024
Bára Růžičková • Webdesignérka
tvorba webu
wordpress
Woman looking at computer screen with animation

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.

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í! 🙂