Chcete na svém webu animovat nějaký prvek, tlačítko, nadpis nebo celý web prošpikovat pěknými načítacími microanimacemi?

Podíváme se jak to jednoduše udělat.

Animace knihovnou AOS

Jedním z nejjednodušších a nejlépe fungujících způsobů je knihovna AOS

Instalací této jednoduché knihovny na váš web jednoduše animuje zvolenými prvky. Vše už je napsáno za vás, pokud sami chcete začít animovat pomocí CSS3, podívejte se na tento návod.

Zdroj a potřebné informace najdete zde:

https://michalsnik.github.io/aos/

https://github.com/michalsnik/aos

Vice podobných knihoven najdete například zde: css-tricks.com/css-animation-libraries/

Jak na to?

Pro úplný základ nám budou stačit tři řádky:

Prvním je nezbytný jquery, bez kterého nám nic moc nepojede, můžeme použít například kód od googlu.

Do hlavičky webu nasadíme tyto řádky:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

+ styl

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

A ideálně do paty, klidně přímo před ukončovací tag </body> tento javascript:

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Všechny se feedují z externího zdroje, doporučuji tedy si soubory stáhnout na ftp a odkazovat na ně přímo.

Proč je to lepší?

1. O kód nepřijdete pokud bude vymazán z externího zdroje.
2. Načítání obou zdrojů nebude závislé na serveru třetí osoby, ale na vašem.

Hotovo, nyní je nainstalováno! Jednodušší už to být nemůže.

Web ještě neanimuje, ale nyní už stačí jen říkat kdo kam bude lítat.

---

Jdeme animovat

Pro úplný základ si ukážeme to nejčastější.

Nadpis, text a obrázek.

Příklad:

Pokud máme tyto tři prvky v základu bez classů a ostatních věcí. (ano například i bez alt popisu obrázku)

<h1>Nadpis stránky</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<img src="https://blog.deight.eu/wp-content/uploads/2021/05/clipart1940049.png">

Jednoduše je animujeme přidáním atributu data-aos=“ANIMACE“ z knihovny, my použijeme 3 různé pro ukázku:

1. fade-up
2. fade-left
3. zoom-in

Zápis bude následně vypadat takto:

<h1 data-aos="fade-up">Nadpis stránky</h1>
<p data-aos="fade-left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<img data-aos="zoom-in" src="https://blog.deight.eu/wp-content/uploads/2021/05/clipart1940049.png">

Ukázka:

---

Nadpis stránky

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

---

Tímto způsobem se dá animovat prakticky vše na webu, animace jsou oddělené a tak je možné je i na sebe ve více úrovních naskládat. Animace mají mnoho možných nastavení jak zpoždění, načtení až po určitých pixelech, které na to nascrollování.

Hlavní výhodou oproti mnoha dalším řešením je, že javascript prvky opět skrývá, pokud se na ně právě nedíváme, tedy web snimuje stále, opět v případě potřeby lze nastavit opak jako u téměř všech možností této funkce.

Vše najdete v odkazech výše, v případě potřeby rád pomůžu s nastavením, kontaktujte mě.

Pokud článek naplnil vaše očekávání, budu rád, když zanecháte zpětnou vazbu níže komentář nebo ohodnotíte zpracování. Článek budu stále aktualizovat o další variace a možnosti.