Maak een geanimeerd 3D-teksteffect

Sep 13, 2025

Procedures

Liefde verloren door Canada's Jam3 is een prachtig donker, mobiel-klaar interactief gedicht met echt hart over de blijvende gevoelens rond verloren liefde. De Website-indeling werd gebouwd met HTML5 met de Gsap Bibliotheek Powering zijn animatie, een van de meest visueel opvallende functies is de geanimeerde 3D-tekst die echt de poëzie van Lost Lost to Brengt tot leven.

Maak interactieve 3D-typografie-effecten

Het ziet er indrukwekkend als de hel, en het is niet moeilijk om in je eigen werk te voldoen om een boeiend te maken gebruikerservaring Dit is hoe het is gedaan.

Wilt u uw eigen boeiende site maken? Proberen website bouwer gereedschap en houd de dingen soepel door het recht te kiezen web hosting onderhoud.

Love Lost's 3D text comes right out of the screen at the viewer — De 3D-tekst van Love Lost is direct uit het scherm bij de kijker

01. Start het HTML-document

De eerste stap is om de structuur van het HTML-document te definiëren. Dit omvat de HTML-container die het document initieert, dat de hoofd- en lichaamsecties bevat. Terwijl het hoofdgedeelte voornamelijk wordt gebruikt om het externe CSS-bestand te laden, bewaart het lichaamsdeel de zichtbare pagina-inhoud die in stap 2 is gemaakt.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& LT; HOOFD & GT;
& LT; TITLE & GT; 3D-tekstbeweging & LT; / TITLE & GT;
& LT; LINK REL = "Stylesheet" Type = "Tekst / CSS" HREF = "Styles.css" / GT;
& LT; / HOOFD & GT;
& LT; BODY & GT;
*** Stap 2 hier
& LT; / BODY & GT;
& LT; / HTML & GT;

02. Zichtbaar HTML-inhoud

Het zichtbare HTML-inhoud bestaat uit een artikelcontainer die de zichtbare tekst bevat. Het belangrijkste deel van de artikelcontainer is het 'data-animate'-attribuut, waarnaar door de CSS wordt verwezen om de visuele effecten toe te passen. De tekst in het artikel is gemaakt van een H1-tag om aan te geven dat de inhoud de hoofdtitel van de pagina is.

 & LT; Artikel Data-Animate = "Verplaats in" & GT;
  & LT; H1 & GT; Hallo daar! & LT; / H1 & GT;
& LT; / Article & GT;

03. CSS-initiatie

Maak een nieuw bestand met de naam 'Styles.css'. De eerste reeks instructies stelt de HTML-container en het lichaam van de pagina in om een zwarte achtergrond te hebben, evenals geen zichtbare randafstand. Wit is ook ingesteld als de standaard tekstkleur voor alle kinderelementen op de pagina om te erven; Het vermijden van de standaard zwarte kleur van tekst die inhoud maken lijkt onzichtbaar te zijn.

 HTML, lichaam {
  Achtergrond: # 000;
  Vulling: 0;
  marge: 0;
  Kleur: #fff;
}

04. Animatiecontainer

De inhoudscontainer waarnaar wordt verwezen met het kenmerk 'Data-animate' heeft specifieke stijlen toegepast. De grootte is ingesteld om overeen te komen met de volledige grootte van het scherm met behulp van VW- en VH-meeteenheden, evenals enigszins geroteerd. Een animatie genaamd 'Movein' wordt toegepast, die gedurende een duur van 20 seconden duurt en oneindig zal herhalen.

 [Data-Animate = "Verplaats in"] {
  Positie: familielid;
  Breedte: 100VW;
  Hoogte: 100VH;
  Dekking: 1;
  Animatie: verplaats 20s oneindig;
  Tekst-Uitlijnen: Centrum;
  Transformeren: Roteren (20DEG);
}

05. Initiatie van animatie

De 'Movein'-animatie waarnaar in de vorige stap wordt verwezen, vereist een definitie met @keyframes. Het eerste frame dat begint bij 0% van de animaties stelt de standaard lettergrootte, tekstpositionering en zichtbare schaduw in. Bovendien is het item ingesteld met nuldekking, zodat het in eerste instantie onzichtbaar is - dat wil zeggen. uit het zicht weergegeven.

 @KeyFrames Movein {
  0% {
  FONT-SIZE: 1EM;
  Links: 0;
  Dekking: 0;
  tekst-schaduw: geen;
  
  *** Stap 6 hier
}

06. Animeer in zicht

By using multiple shadows you can enhance the 3D effect — Door meerdere schaduwen te gebruiken, kunt u het 3D-effect verbeteren

Het volgende frame wordt bij 10% door de animatie geplaatst. Dit frame stelt de dekking in om volledig zichtbaar te zijn, waardoor de tekst geleidelijk in beeld wordt geanimeerd. Bovendien worden meerdere schaduwen toegevoegd met blauwe en afnemende kleurwaarden om de illusies van 3D-diepte aan de tekst te geven.

 10%

  Dekking: 1;
  schaduw tekst:
  .2EM -.2EM 4PX #AAA,
  .4em -.4em 4px # 777,
  .6em -.6em 4px # 444,
  .8em -.8em 4px # 111;

*** Stap 7 hier

07. Finaliseren van de animatie

De laatste frames treden op bij 80% en aan het einde van de animatie. Deze zijn verantwoordelijk voor het vergroten van de lettergrootte en het verplaatsen van het element naar links. Nieuwe instellingen worden ook toegepast voor de tekstschaduw om te animeren, terwijl ook de tekst uit het uitzicht vanuit frames 80% tot 100% vervaagt.

80% {
  FONT-SIZE: 8EM;
  links: -8em;
  Dekking: 1;

100% {
  FONT-SIZE: 10EM;
  Links: -10em;
  Dekking: 0;
  schaduw tekst:
  .02EM -.02EM 4PX #AAA,
  .04EM -.04EM 4PX # 777,
  .06EM -.06EM 4PX # 444,
  .08em -.08em 4px # 111;

***

OPMERKING: Welk project waar u aan begint, heeft cloud opslag Dat kan het hoofd maken is essentieel (onze gids helpt).

Dit artikel is oorspronkelijk gepubliceerd in kwestie 273 van Creative Web Design Magazine Web Designer. Koop nummer 273 hier of Abonneer u hier op Web Designer

Gerelateerde artikelen:

Maak een gloeiend neon-tekst-effect
Hoe web-animaties debuggen
Maak storyboards voor webanimaties

Maak een geanimeerd 3D-teksteffect

01. Start het HTML-document

02. Zichtbaar HTML-inhoud

03. CSS-initiatie

04. Animatiecontainer

05. Initiatie van animatie

06. Animeer in zicht

07. Finaliseren van de animatie

Procedures - Meest populaire artikelen

Hoe HTML-code sneller te schrijven

Hoe een logo in Photoshop te maken

Animate SVG met JavaScript

Het maken van glitch tekst en beeldeffecten in CSS

Hoe Creature Anatomy mastert

6 manieren om uw modellering te versnellen

Hoe massale explosies te maken met V-Ray

Maak een drukke stadsscène in Illustrator

Categorieën