Tartalom
- 01. Kezdje a HTML dokumentumot
- 02. Látható HTML-tartalom
- 03. CSS-kezdeményezés
- 04. Animációs tároló
- 05. Animáció megindítása
- 06. Animáld a látótérbe
- 07. Az animáció befejezése
A Love Lost by Canada Jam3 egy gyönyörűen sötét, mobilra kész interaktív vers, valódi szívvel az elveszett szerelem körüli tartós érzésekről. A weboldal elrendezését a HTML5 felhasználásával építették, az animációt a GSAP könyvtár használta. Az egyik leglátványosabb jellemzője az animált 3D-s szöveg, amely valóban életre kelti a Love Lost költészetét.
- Készítsen interaktív 3D tipográfiai effektusokat
Pokolian lenyűgözőnek tűnik, és nem nehéz beépíteni saját munkájába, hogy vonzó felhasználói élményt teremtsen; itt van, hogyan történik.
Szeretne saját, megnyerő webhelyet készíteni? Próbáljon ki egy weboldal-készítő eszközt, és a megfelelő webtárhely-szolgáltatás kiválasztásával tartsa a dolgokat gördülékenyen.
01. Kezdje a HTML dokumentumot
Az első lépés a HTML dokumentum struktúrájának meghatározása. Ide tartozik a dokumentumot kezdeményező HTML-tároló, amely a fej és törzs szakaszokat tartalmazza. Míg a fejrész elsősorban a külső CSS fájl betöltésére szolgál, a törzs szakasz a 2. lépésben létrehozott látható oldal tartalmát tárolja.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * LÉPÉS 2 ITT / body> / html>
02. Látható HTML-tartalom
A látható HTML-tartalom egy cikktartályból áll, amely a látható szöveget tartalmazza. A cikktároló fontos része az ’data-animate’ attribútum, amelyre a CSS hivatkozni fog a vizuális effektusok alkalmazására. A cikk belsejében lévő szöveg h1 tagből készül, jelezve, hogy a tartalom az oldal fő címe.
cikk data-animate = "move in"> h1> Helló! / h1> / article>
03. CSS-kezdeményezés
Hozzon létre egy új fájlt ’styles.css’ néven. Az első utasításkészlet az oldal HTML-tárolóját és törzsét fekete háttérrel, valamint látható szegélytávolsággal nem rendelkezik. A fehér az alapértelmezett szövegszínként van beállítva az összes öröklendő gyermekelem számára is; elkerülve az alapértelmezett fekete színt, a tartalom láthatatlannak tűnik.
html, body {háttér: # 000; párnázás: 0; margó: 0; szín: #fff; }
04. Animációs tároló
Az ’data-animálni’ attribútummal hivatkozott tartalomtárban meghatározott stílusok vannak alkalmazva. Méretét úgy állítják be, hogy megfeleljen a képernyő teljes méretének, vw és vh mértékegységek használatával, valamint kissé elforgatva. A „moveIn” nevű animációt alkalmazzák, amely 20 másodpercig tart és végtelenül megismétlődik.
[data-animate = "költözés"] {pozíció: relatív; szélesség: 100vw; magasság: 100vh; átlátszatlanság: 1; animáció: moveIn 20s végtelen; text-align: center; transzformáció: forgatás (20deg); }
05. Animáció megindítása
Az előző lépésben hivatkozott ’moveIn’ animációhoz @keyframes-et használó definícióra van szükség. Az animáció 0% -ánál kezdődő első keret az alapértelmezett betűméretet, a szöveg pozícionálását és a látható árnyékot állítja be. Ezenkívül az elem nulla átlátszatlansággal van beállítva, így kezdetben láthatatlan - azaz. láthatatlanul jelenik meg.
@ kulcskeret moveIn {0% {font-size: 1em; bal: 0; átlátszatlanság: 0; szöveg-árnyék: nincs; } * * * 6. LÉPÉS ITT}
06. Animáld a látótérbe
A következő képkocka 10% -ra kerül az animáción keresztül. Ez a keret az átlátszatlanságot teljesen láthatóvá teszi, aminek eredményeként a szöveg fokozatosan animálódik a nézetbe.Ezenkívül több árnyék is hozzáadódik kék és csökkenő színértékekkel, hogy a 3D-s mélység illúzióit adja a szöveghez.
10% {átlátszatlanság: 1; szöveg-árnyék: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7. LÉPÉS ITT
07. Az animáció befejezése
Az utolsó képkockák 80% -ban és az animáció legvégén fordulnak elő. Ezek felelősek a betűméret növeléséért és az elem bal felé mozgatásáért. Új beállításokat is alkalmaznak a szöveges árnyék felé, amelyek animálódnak, miközben a szöveg 80% és 100% közötti képkockákon kívül is elhalványul.
80% {font-size: 8em; bal: -8em; átlátszatlanság: 1; } 100% {font-size: 10em; balra: -10em; átlátszatlanság: 0; szöveg-árnyék: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Megjegyzés: Bármely projektbe belekezd, elengedhetetlen a felhőalapú tárhelye (az útmutatónk segít).
Ez a cikk eredetileg a Web Designer kreatív webdesign magazin 273. számában jelent meg. Vásárolja meg a 273. számot itt vagy itt iratkozzon fel a Web Designerre.
