Inhoud
- 01. Start het HTML-document
- 02. Zichtbare HTML-inhoud
- 03. CSS-initiatie
- 04. Animatiecontainer
- 05. Animatie-initiatie
- 06. Animeer in beeld
- 07. Afronden van de animatie
Love Lost by Canada's Jam3 is een prachtig donker interactief gedicht dat geschikt is voor mobiel en met een echt hart over de blijvende gevoelens rond verloren liefde. De lay-out van de website is gebouwd met HTML5 waarbij de GSAP-bibliotheek de animatie aandrijft. Een van de meest visueel opvallende kenmerken is de geanimeerde 3D-tekst die de poëzie van Love Lost echt tot leven brengt.
- Maak interactieve 3D-typografie-effecten
Het ziet er indrukwekkend uit, en het is niet moeilijk om in je eigen werk op te nemen om een boeiende gebruikerservaring te creëren; hier is hoe het moet.
Wilt u uw eigen boeiende site maken? Probeer een tool voor het bouwen van websites en houd alles soepel door de juiste webhostingservice te kiezen.
01. Start het HTML-document
De eerste stap is het definiëren van de structuur van het HTML-document. Dit omvat de HTML-container die het document initieert, die de head- en body-secties bevat. Hoewel de head-sectie voornamelijk wordt gebruikt om het externe CSS-bestand te laden, zal de body-sectie de zichtbare pagina-inhoud opslaan die in stap 2 is gemaakt.
! DOCTYPE html> html> head> title> 3D-tekstverplaatsing / titel> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 HIER / body> / html>
02. Zichtbare HTML-inhoud
De zichtbare HTML-inhoud bestaat uit een artikelcontainer die de zichtbare tekst bevat. Het belangrijkste onderdeel van de artikelcontainer is het kenmerk ‘data-animate’, 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.
article data-animate = "move in"> h1> Hallo daar! / h1> / article>
03. CSS-initiatie
Maak een nieuw bestand met de naam ’styles.css’. In de eerste set instructies is ingesteld dat de HTML-container en het hoofdgedeelte van de pagina een zwarte achtergrond hebben en geen zichtbare randafstand. Wit is ook ingesteld als de standaardtekstkleur voor alle onderliggende elementen op de pagina om te erven; het vermijden van de standaard zwarte kleur van tekst waardoor de inhoud onzichtbaar lijkt.
html, body {background: # 000; opvulling: 0; marge: 0; kleur: #fff; }
04. Animatiecontainer
Er zijn specifieke stijlen toegepast op de inhoudscontainer waarnaar wordt verwezen met het kenmerk ‘data-animate’. De grootte is ingesteld om overeen te komen met de volledige grootte van het scherm met behulp van vw- en vh-meeteenheden, en is ook enigszins gedraaid. Er wordt een animatie met de naam ’moveIn’ toegepast, die 20 seconden duurt en oneindig wordt herhaald.
[data-animate = "verplaatsen in"] {positie: relatief; breedte: 100vw; hoogte: 100vh; ondoorzichtigheid: 1; animatie: moveIn 20s oneindig; text-align: center; transformeren: roteren (20 graden); }
05. Animatie-initiatie
De ’moveIn’ -animatie waarnaar in de vorige stap wordt verwezen, vereist een definitie met @keyframes. Het eerste frame, beginnend bij 0% van de animatie, stelt de standaard lettergrootte, tekstpositionering en zichtbare schaduw in. Bovendien is het item ingesteld zonder dekking, zodat het aanvankelijk onzichtbaar is, dwz. weergegeven uit het zicht.
@keyframes moveIn {0% {font-size: 1em; links: 0; ondoorzichtigheid: 0; text-shadow: geen; } * * * STAP 6 HIER}
06. Animeer in beeld
Het volgende frame wordt door de animatie op 10% geplaatst. Dit frame stelt de dekking in op volledig zichtbaar, waardoor de tekst geleidelijk in beeld wordt gebracht.Bovendien worden meerdere schaduwen toegevoegd met blauwe en afnemende kleurwaarden om de illusies van 3D-diepte aan de tekst te geven.
10% {dekking: 1; tekstschaduw: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * STAP 7 HIER
07. Afronden van de animatie
De laatste frames komen voor bij 80% en helemaal aan het einde van de animatie. Deze zijn verantwoordelijk voor het vergroten van de lettergrootte en het verplaatsen van het element naar links. Er worden ook nieuwe instellingen toegepast voor de tekstschaduw om naartoe te animeren, terwijl ook de tekst uit het zicht van frames 80% tot 100% vervaagt.
80% {font-size: 8em; links: -8em; ondoorzichtigheid: 1; } 100% {font-size: 10em; links: -10em; ondoorzichtigheid: 0; tekstschaduw: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Opmerking: aan welk project u ook begint, het is essentieel om cloudopslag te hebben die het hoofd kan bieden (onze gids zal helpen).
Dit artikel is oorspronkelijk gepubliceerd in nummer 273 van het creatieve webdesignmagazine Web Designer. Koop nummer 273 hier of abonneer u hier op Web Designer.
