Cre­ate a vis­ually an­i­mated 3D text in­tro

An an­i­mated in­tro­duc­tion giv­ing the il­lu­sion of 3D depth of space and spec­i­fied text con­tent

Web Designer - - Lightbox -

1. Ini­ti­ate the HTML doc­u­ment

The first step is to de­fine the struc­ture of the HTML doc­u­ment. This in­cludes the HTML con­tainer that ini­ti­ates the doc­u­ment, which con­tains the head and body sec­tions. While the head sec­tion is pri­mar­ily used to load the ex­ter­nal CSS file, the body sec­tion will store the vis­i­ble page con­tent cre­ated in step 2.

<!DOCTYPE html>



<ti­tle>3d Text Move­ment</ti­tle>

<link rel="stylesheet" type="text/css" href="styles.css" />






2. Vis­i­ble HTML con­tent

The vis­i­ble HTML con­tent con­sists of an ar­ti­cle con­tainer that con­tains the vis­i­ble text. The im­por­tant part of the ar­ti­cle con­tainer is the 'data-an­i­mate' at­tribute, which will be ref­er­enced by the CSS to ap­ply the visual ef­fects. The text inside the ar­ti­cle is made from a h1 tag to in­di­cate that the con­tent is the page’s main ti­tle.

<ar­ti­cle data-an­i­mate="move in">

<h1>hello There!</h1>


3. CSS ini­ti­a­tion

Cre­ate a new file called 'styles.css'. The first set of in­struc­tions set the page’s HTML con­tainer and body to have a black back­ground, as well as no vis­i­ble bor­der spac­ing. White is also set as the de­fault text colour for all child el­e­ments on the page to in­herit; avoid­ing the de­fault black colour of text mak­ing con­tent ap­pear to be in­vis­i­ble. html, body{ back­ground: #000; pad­ding: 0; mar­gin: 0; color: #fff; }

4. Animation con­tainer

The con­tent con­tainer ref­er­enced with the 'data-an­i­mate' at­tribute has spe­cific styles ap­plied. Its size is set to match the full size of the screen us­ing vw and vh mea­sure­ment units, as well as be­ing slightly rotated. An animation called 'movein' is ap­plied, which will last for a du­ra­tion of 20 sec­onds and will re­peat in­fin­itely. [data-an­i­mate="move in"]{ po­si­tion: rel­a­tive; width: 100vw; height: 100vh; opac­ity: 1; animation: movein 20s in­fi­nite; text-align: cen­ter; trans­form: ro­tate(20deg); }

5. Animation ini­ti­a­tion

The 'movein' animation ref­er­enced in the pre­vi­ous step re­quires a def­i­ni­tion us­ing @keyframes. The first frame start­ing at 0% of the animation sets the de­fault font size, text po­si­tion­ing and vis­i­ble shadow. Ad­di­tion­ally, the item is set with zero opac­ity so that it is ini­tially in­vis­i­ble – ie dis­played out of view.

@keyframes movein {

0%{ font-size: 1em; left: 0; opac­ity: 0; text-shadow: none;


*** STEP 6 HERE }

6. An­i­mate into view

The next frame is placed at 10% through the animation. This frame sets the opac­ity to fully vis­i­ble, re­sult­ing in the text grad­u­ally be­ing an­i­mated into view. Ad­di­tion­ally, mul­ti­ple shad­ows are added with blue and de­creas­ing colour val­ues to give the il­lu­sions of 3D depth to the text. 10% { opac­ity: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px #777, .6em -.6em 4px #444, .8em -.8em 4px #111; } *** STEP 7 HERE

7. Fi­nal­is­ing the animation

The fi­nal frames oc­cur at 80% and at the very end of the animation. Th­ese are re­spon­si­ble for in­creas­ing the font size and mov­ing the el­e­ment to­wards the left. New set­tings are also ap­plied for the text shadow to an­i­mate to­wards, while also fad­ing the text out of view from frames 80% to 100%.

80%{ font-size: 8em; left: -8em; opac­ity: 1; }

100%{ font-size: 10em; left: -10em; opac­ity: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px #777, .06em -.06em 4px #444, .08em -.08em 4px #111; } ***

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.