Cre­ate an an­i­mated header

Use CSS keyframe an­i­ma­tion to cre­ate independently an­i­mated el­e­ments for your web page ban­ners

Web Designer - - Lightbox -

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

The first step is to ini­ti­ate the doc­u­ment with HTML. This con­sists of a doc­u­ment con­tainer el­e­ment used to store the head and body sec­tions. While the head sec­tion is pri­mar­ily used to load the ex­ter­nal CSS, the body is used to store the con­tent el­e­ments cre­ated in step 2. <!DOCTYPE html>



<ti­tle>an­i­mated Ban­ner</ti­tle>

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






2. HTML con­tent

The HTML con­tent con­sists of a head el­e­ment to be used as a con­tainer for the con­tent el­e­ments to show. Each con­tent that is to be an­i­mated uses a ‘dataan­i­ma­tion’ at­tribute to de­scribe which an­i­ma­tion is to be ap­plied. This at­tribute is picked up by the CSS in a later step to ap­ply the re­quired an­i­ma­tion.


<h1 data-an­i­ma­tion="in" datati­tle>ti­tle</h1>

<di­vda ta-an­i­ma­tion =" up"></d iv>

<di­vda ta-an­i­ma­tion =" down"></d iv> </header>

3. CSS start: header

Cre­ate a new file called ‘styles.css’. The first step in this file de­fines how to display the header con­tainer. Its size is set in re­la­tion to the browser win­dow size us­ing the vw and ch unit mea­sure­ments. Over­flow is also set to hid­den, so that con­tent out­side the de­fined size is clipped. header{ po­si­tion: rel­a­tive; width: 100vw; height: 50vh; over­flow: hid­den; }

4. In­ner el­e­ments and ti­tle

The el­e­ments in­side the header sec­tion are dis­played us­ing ab­so­lute po­si­tion­ing; ap­pear­ing in re­la­tion to the par­ent header. The el­e­ment with the ‘data-ti­tle’ at­tribute is set to display 5 times big­ger than the page font size. The ‘left’ prop­erty will display it in a spe­cific po­si­tion – 10% from the left, while ‘z-in­dex’ will guar­an­tee its ap­pear­ance above all other con­tent. header > *{

po­si­tion: ab­so­lute; } header > [data-ti­tle]{ font-size: 5em; left: 10%; z-in­dex: 99999; }

5. First div child

The div el­e­ments are used to rep­re­sent where pic­tures will ap­pear; the ‘nth-of-type’ se­lec­tor is used to se­lect the first div in­side the header. Use an im­age of your choice with the ‘back­ground’ prop­erty – this ex­am­ple sets a semi-trans­par­ent colour for de­fault vis­i­bil­ity. The back­ground is set to cover the el­e­ment size de­fined through the width and height prop­er­ties. header > div:nth-of-type(1){ top: 5%; left: 10%; width: 50%; height: 50%; bor­der: 1px solid #000; back­ground: url(your-im­age.png) rgba(0,255,0,.25);

back­ground-size: cover; }

6. Sec­ond div child

The same type of for­mat­ting is ap­plied to the sec­ond div child in­side the header. Unique po­si­tion­ing us­ing top and left are ap­plied, along with width and height for its size. The back­ground colour de­fined by ‘rgba’ is for display pur­poses of this tu­to­rial – so feel free to take this out when us­ing your im­age. header > div:nth-of-type(2){ top: 20%; left: 40%; width: 50%; height: 50%;

back­ground: url(your-im­age.png) rgba(0,0,255,.25);

back­ground-size: cover; }

7. An­i­ma­tion ap­pli­ca­tion

El­e­ments that have the ‘data-an­i­ma­tion’ at­tribute need to have an as­so­ci­ated an­i­ma­tion ap­plied to them. This step searches for these el­e­ments in­side the header con­tainer and ap­plies the cor­rect an­i­ma­tion. The set­tings are made to make the an­i­ma­tion last for one sec­ond us­ing ‘1s’; al­ter this to change the speed of the an­i­ma­tion. header [data-an­i­ma­tion="up"]{

an­i­ma­tion: openup 1s for­wards; } header [data-an­i­ma­tion="down"]{

an­i­ma­tion: open­down 1s for­wards; } header [data-an­i­ma­tion="in"]{

an­i­ma­tion: openin 1s for­wards; }

8. An­i­ma­tion def­i­ni­tions

The dif­fer­ent an­i­ma­tions are de­fined us­ing just one keyframe – which will be the start­ing point for the an­i­ma­tion to start ‘from’. The fi­nal an­i­ma­tion frame will be the de­fault set­tings cre­ated for the el­e­ment in pre­vi­ous steps 4 - 6. This al­lows the same an­i­ma­tion to be ap­plied to many items.

@keyframes openup {

from{ top: 100%; } }

@keyframes open­down {

from{ top: -100%; } }

@keyframes openin {

from{ font-size: 0; } }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.