Innehåll
- 01. Initiera HTML-dokumentet
- 02. Synligt HTML-innehåll
- 03. CSS-initiering
- 04. Animeringsbehållare
- 05. Animeringsinitiering
- 06. Animera i sikte
- 07. Avsluta animeringen
Love Lost by Canadas Jam3 är en vackert mörk, mobilklar interaktiv dikt med äkta hjärta om de bestående känslorna kring förlorad kärlek. Webbplatslayouten byggdes med HTML5 med GSAP-biblioteket som driver dess animering, en av dess mest visuellt slående funktioner är dess animerade 3D-text som verkligen ger Love Lost poesi liv.
- Gör interaktiva 3D-typografieffekter
Det ser imponerande ut som helvete, och det är inte svårt att integrera i ditt eget arbete för att skapa en engagerande användarupplevelse; här är hur det görs.
Vill du skapa din egen engagerande webbplats? Prova ett verktyg för webbplatsbyggare och håll sakerna smidiga genom att välja rätt webbhotell.
01. Initiera HTML-dokumentet
Det första steget är att definiera strukturen för HTML-dokumentet. Detta inkluderar HTML-behållaren som initierar dokumentet, som innehåller huvud- och kroppssektionerna. Medan huvudsektionen huvudsakligen används för att ladda den externa CSS-filen, kommer kroppssektionen att lagra det synliga sidinnehåll som skapades i steg 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 HÄR / body> / html>
02. Synligt HTML-innehåll
Det synliga HTML-innehållet består av en artikelbehållare som innehåller den synliga texten. Den viktiga delen av artikelbehållaren är attributet ”data-animera”, som kommer att refereras av CSS för att tillämpa de visuella effekterna. Texten inuti artikeln är gjord av en h1-tagg för att indikera att innehållet är sidans huvudrubrik.
artikel data-animate = "flytta in"> h1> Hej där! / h1> / artikel>
03. CSS-initiering
Skapa en ny fil som heter 'styles.css'. Den första uppsättningen instruktioner ställer in sidans HTML-behållare och kropp på att ha en svart bakgrund, såväl som inget synligt kantavstånd. Vit är också inställt som standardtextfärg för alla underordnade element på sidan att ärva; undviker den svarta standardfärgen på text som gör att innehåll verkar vara osynligt.
html, body {bakgrund: # 000; stoppning: 0; marginal: 0; färg: #fff; }
04. Animeringsbehållare
Innehållsbehållaren som refereras till med attributet 'data-animera' har specifika format tillämpats. Dess storlek är inställd på att matcha skärmens fulla storlek med hjälp av vw- och vh-måttenheter, såväl som att den roteras något. En animering som kallas ”moveIn” tillämpas, som kommer att pågå i 20 sekunder och upprepas oändligt.
[data-animate = "flytta in"] {position: relativ; bredd: 100vw; höjd: 100vh; opacitet: 1; animation: moveIn 20s oändlig; textjustera: centrum; transformera: rotera (20deg); }
05. Animeringsinitiering
Animationen ”moveIn” som det hänvisades till i föregående steg kräver en definition med @keyframes. Den första ramen som börjar vid 0% av animeringen ställer in standardteckenstorlek, textpositionering och synlig skugga. Dessutom är artikeln inställd med noll opacitet så att den initialt är osynlig - dvs. visas utom synhåll.
@ keyframes moveIn {0% {font-size: 1em; vänster: 0; opacitet: 0; text-skugga: ingen; } * * * STEG 6 HÄR}
06. Animera i sikte
Nästa bild placeras på 10% genom animeringen. Denna ram ställer in opaciteten till helt synlig, vilket resulterar i att texten gradvis animeras för att synas.Dessutom läggs flera skuggor till med blå och minskande färgvärden för att ge illusionerna av 3D-djup till texten.
10% {opacitet: 1; text-skugga: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * STEG 7 HÄR
07. Avsluta animeringen
De sista ramarna uppstår vid 80% och i slutet av animeringen. Dessa ansvarar för att öka teckenstorleken och flytta elementet åt vänster. Nya inställningar tillämpas också för att textskuggan ska animeras mot, samtidigt som texten bleknar ur sikte från ramar 80% till 100%.
80% {font-size: 8em; vänster: -8em; opacitet: 1; } 100% {font-size: 10em; vänster: -10em; opacitet: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Obs! Oavsett vilket projekt du påbörjar är det viktigt att ha molnlagring som klarar (vår guide hjälper).
Denna artikel publicerades ursprungligen i nummer 273 av den kreativa webbdesigntidningen Web Designer. Köp nummer 273 här eller prenumerera på Web Designer här.
