Plynulý přechod mezi stránkami

Snažíme-li se webovou stránku vytvářet s ohledem na krásu (s využitím animací a různých plynulých přechodů), může působit přechod mezi dvěma stránkami lehce rušivě. Zvlášť potom u komplikovanějších layoutů lze pozorovat nepěkné probliknutí, než si prohlížeč přechroupe HTML, CSS a JavaScript.

První možnost, jak se tomuto vyhnout, je použít AJAX a veškerý obsah načítat asynchronně.

To díky history.pushState sice jde řešit i s používáním normálních URL, ale stránka se stává náchylnější k chybám, kdy drobná chyba v JS může znefunkčnit celou navigaci na webu. Klasický přechod mezi stránkami je vlastně takový restart všech skriptů.

Kromě toho je zajaxování webu relativně pracné.

Skrytí a zobrazení animací

Plynulý přechod mezi stránkami

Řešením proto může být:

  1. Použití skrývací animace před opuštěním stránky.
  2. Použití zobrazovací animace na začátku načtení stránky.

Potřebnou animaci stačí vytvořit pomocí @keyframes a přiřadit ji do vlastnosti animation). Zpětný průchod animací zajistí klíčové slovo reverse.

Objevovací animace se spustí při načtení stránky.

Animace zmizení bude vyvolána po kliknutí na odkaz mířící pryč. Získat všechny odkazy na stránce jde z document.links. Nabízelo by se možná použít událost onbeforeunload, nicméně nejspíš ji nejde rozumně časovat, takže by nešlo garantovat přehrání ukončovací animace.

Živá ukázka

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Animace

Animace na webových stránkách

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

Odpočítávání času v JavaScriptu

Odpočítávání času v HTML

Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.

Plynulé posouvání :hover efektu

Plynule se posouvající :hover efekt

Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Komentáře