Obsah
- 01. Spustite dokument HTML
- 02. Viditeľný obsah HTML
- 03. Iniciácia CSS
- 04. Kontajner animácie
- 05. Spustenie animácie
- 06. Animujte do zorného poľa
- 07. Dokončenie animácie
Love Lost by Canada’s Jam3 je nádherne temná interaktívna báseň pripravená na mobilné telefóny so skutočným srdcom o pretrvávajúcich pocitoch okolo stratenej lásky. Rozloženie webových stránok bolo zostavené pomocou formátu HTML5 s knižnicou GSAP napájajúcou jej animáciu. Jednou z vizuálne najvýraznejších funkcií je animovaný 3D text, ktorý skutočne oživuje poéziu Love Lost.
- Vytvárajte interaktívne efekty 3D typografie
Vyzerá to pekelne pôsobivo a nie je ťažké ho začleniť do svojej vlastnej práce a vytvoriť tak pútavý používateľský zážitok; takto sa to robí.
Chcete si vytvoriť svoj vlastný pútavý web? Vyskúšajte nástroj na tvorbu webových stránok a zabezpečte plynulý chod výberu správnej webhostingovej služby.
01. Spustite dokument HTML
Prvým krokom je definovanie štruktúry dokumentu HTML. Patrí sem kontajner HTML, ktorý iniciuje dokument, ktorý obsahuje sekcie hlavy a tela. Zatiaľ čo hlavná časť sa primárne používa na načítanie externého súboru CSS, hlavná časť uloží viditeľný obsah stránky vytvorený v kroku 2.
! DOCTYPE html> html> hlava> nadpis> 3D pohyb textu / nadpis> odkaz rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> telo> * * * KROK 2 TU / telo> / html>
02. Viditeľný obsah HTML
Viditeľný obsah HTML pozostáva z kontajnera na článok, ktorý obsahuje viditeľný text. Dôležitou súčasťou kontajnera na články je atribút ‘data-animate’, na ktorý bude CSS odkazovať pri použití vizuálnych efektov. Text vo vnútri článku je vyrobený zo značky h1, ktorá naznačuje, že obsah je hlavným nadpisom stránky.
article data-animate = "move in"> h1> Hello Hello! / h1> / article>
03. Iniciácia CSS
Vytvorte nový súbor s názvom „styles.css“. Prvá sada pokynov nastavila, aby kontajner a telo HTML stránky mali čierne pozadie a aby neboli viditeľné medzery medzi okrajmi. Biela je tiež nastavená ako predvolená farba textu pre všetky podradené prvky na stránke, ktoré sa majú dediť; vyhnúť sa predvolenej čiernej farbe textu, aby sa obsah javil ako neviditeľný.
html, body {pozadie: # 000; výplň: 0; okraj: 0; farba: #fff; }
04. Kontajner animácie
Kontajner obsahu odkazovaný na atribút ‘data-animate’ má použité špecifické štýly. Jeho veľkosť je pomocou meracích jednotiek vw a vh nastavená tak, aby zodpovedala celej veľkosti obrazovky, a aby bola mierne otočená. Použije sa animácia s názvom „moveIn“, ktorá bude trvať 20 sekúnd a bude sa opakovať nekonečne dlho.
[data-animate = "move in"] {pozícia: relatívna; šírka: 100vw; výška: 100vh; nepriehľadnosť: 1; animácia: moveIn 20s infinite; zarovnanie textu: na stred; transformácia: otočenie (20 stupňov); }
05. Spustenie animácie
Animácia „moveIn“ uvedená v predchádzajúcom kroku vyžaduje definíciu pomocou @keyframes. Prvý snímok začínajúci na 0% animácie nastavuje predvolenú veľkosť písma, umiestnenie textu a viditeľný tieň. Položka je navyše nastavená na nulovú nepriehľadnosť, takže je pôvodne neviditeľná - tj. zobrazené mimo zorného poľa.
@keyframes moveIn {0% {font-size: 1em; vľavo: 0; nepriehľadnosť: 0; tieň textu: žiadny; } * * * KROK 6 TU}
06. Animujte do zorného poľa
Nasledujúci snímok je prostredníctvom animácie umiestnený na 10%. Tento rám nastavuje nepriehľadnosť na úplne viditeľné, čo vedie k postupnej animácii textu do zobrazenia.Ďalej je pridaných viac tieňov s modrými a znižujúcimi sa hodnotami farieb, aby text získal ilúzie 3D hĺbky.
10% {nepriehľadnosť: 1; tieňový text: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * KROK 7 SEM
07. Dokončenie animácie
Konečné snímky sa vyskytujú na 80% a na samom konci animácie. Sú zodpovedné za zväčšenie veľkosti písma a posunutie prvku smerom doľava. Nové nastavenia sa uplatňujú aj na tieň textu, ktorý sa má animovať, a zároveň vybledne text z rámca z 80% na 100%.
80% {font-size: 8em; vľavo: -8em; nepriehľadnosť: 1; } 100% {font-size: 10em; vľavo: -10em; nepriehľadnosť: 0; tieňový text: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .0emem -.06em 4px # 444, 0,08em -,08em 4px # 111; } * * *
Poznámka: Nech sa už pustíte do ktoréhokoľvek projektu, je nevyhnutné mať cloudové úložisko, ktoré si poradí. (Pomôže vám náš sprievodca).
Tento článok bol pôvodne publikovaný v čísle 273 kreatívneho časopisu Web Design Web Designer. Kúpte si číslo 273 tu alebo prihlásiť sa na odber webového dizajnéra tu.
