Obsah
- 01. Spusťte dokument HTML
- 02. Viditelný obsah HTML
- 03. Zahájení CSS
- 04. Animační kontejner
- 05. Zahájení animace
- 06. Animujte do zorného pole
- 07. Dokončení animace
Love Lost od kanadského Jam3 je nádherně temná interaktivní báseň připravená na mobil se skutečným srdcem o přetrvávajících pocitech kolem ztracené lásky. Rozvržení webu bylo vytvořeno pomocí HTML5 s knihovnou GSAP, která napájí jeho animaci. Jednou z jeho vizuálně nejvýraznějších funkcí je animovaný 3D text, který skutečně oživuje poezii Love Lost.
- Vytvářejte interaktivní 3D typografické efekty
Vypadá to působivě jako peklo a není těžké jej začlenit do vlastní práce a vytvořit poutavý uživatelský zážitek; jak se to dělá.
Chcete vytvořit svůj vlastní poutavý web? Vyzkoušejte nástroj pro tvorbu webových stránek a udržujte plynulý chod výběrem správné webové hostitelské služby.
01. Spusťte dokument HTML
Prvním krokem je definování struktury dokumentu HTML. To zahrnuje kontejner HTML, který iniciuje dokument, který obsahuje části hlavy a těla. Zatímco hlavní část se primárně používá k načtení externího souboru CSS, hlavní část uloží viditelný obsah stránky vytvořený v kroku 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * KROK 2 ZDE / tělo> / html>
02. Viditelný obsah HTML
Viditelný obsah HTML se skládá z kontejneru článku, který obsahuje viditelný text. Důležitou součástí kontejneru na článek je atribut ‘data-animate’, na který bude CSS odkazovat při použití vizuálních efektů. Text uvnitř článku je vyroben ze značky h1, která označuje, že obsah je hlavním nadpisem stránky.
article data-animate = "move in"> h1> Hello There! / h1> / article>
03. Zahájení CSS
Vytvořte nový soubor s názvem „styles.css“. První sada pokynů nastavila kontejner a tělo HTML stránky tak, aby mělo černé pozadí a také žádné viditelné mezery mezi okraji. Bílá je také nastavena jako výchozí barva textu pro všechny podřízené prvky na stránce, které mají zdědit; vyhnout se výchozí černé barvě textu, díky níž se obsah bude jevit jako neviditelný.
html, body {pozadí: # 000; výplň: 0; okraj: 0; barva: #fff; }
04. Animační kontejner
Kontejner obsahu odkazovaný na atribut ‘data-animate’ má specifické styly. Jeho velikost je nastavena tak, aby odpovídala celé velikosti obrazovky pomocí měrných jednotek vw a vh, a aby byla mírně otočena. Použije se animace s názvem „moveIn“, která bude trvat 20 sekund a bude se nekonečně opakovat.
[data-animate = "move in"] {pozice: relativní; šířka: 100vw; výška: 100vh; neprůhlednost: 1; animace: moveIn 20s infinite; zarovnání textu: na střed; transformace: otočit (20 stupňů); }
05. Zahájení animace
Animace „moveIn“ uvedená v předchozím kroku vyžaduje definici pomocí @keyframes. První snímek začínající na 0% animace nastavuje výchozí velikost písma, umístění textu a viditelný stín. Položka je navíc nastavena s nulovou neprůhledností, takže je zpočátku neviditelná - tj. zobrazeny mimo dohled.
@keyframes moveIn {0% {font-size: 1em; vlevo: 0; neprůhlednost: 0; textový stín: žádný; } * * * KROK 6 ZDE}
06. Animujte do zorného pole
Další snímek je umístěn na 10% prostřednictvím animace. Tento rámeček nastavuje neprůhlednost na plně viditelnou, což má za následek postupnou animaci textu do zobrazení.Navíc je přidáno několik stínů s modrou a snižujícími se barevnými hodnotami, aby text získal iluze 3D hloubky.
10% {opacita: 1; textový stín: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * KROK 7 ZDE
07. Dokončení animace
Konečné snímky se vyskytují na 80% a na samém konci animace. Ty jsou zodpovědné za zvětšení velikosti písma a posunutí prvku směrem doleva. Nová nastavení se aplikují také na stínování textu, které se má animovat směrem k, a zároveň vybledne text mimo zobrazení z rámců 80% až 100%.
80% {font-size: 8em; vlevo: -8em; neprůhlednost: 1; } 100% {font-size: 10em; vlevo: -10em; neprůhlednost: 0; textový stín: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .0emem -.06em 4px # 444, 0,08em -,08em 4px # 111; } * * *
Poznámka: Ať už se pustíte do jakéhokoli projektu, je nezbytné mít cloudové úložiště, které zvládne (náš průvodce vám pomůže).
Tento článek byl původně publikován v čísle 273 kreativního časopisu Web Design Web Designer. Koupit číslo 273 zde nebo zde se přihlaste k odběru Web Designer.
