Cre­ate an an­i­mated bird box with HTML5 & CSS

An an­i­mated ef­fect of fly­ing birds that can be used to dec­o­rate your web­site con­tent

Web Designer - - Lightbox -

1. Ini­ti­ate doc­u­ment The first step is to ini­ti­ate the page doc­u­ment. This con­sists of the HTML con­tainer, re­spon­si­ble for stor­ing the head and body sec­tions. While the head sec­tion is used to load the ex­ter­nal CSS and Javascript re­sources, the body sec­tion is used to store vis­i­ble con­tent el­e­ments cre­ated in later steps.

<!DOCTYPE html>



<ti­tle>birds An­i­ma­tion</ti­tle>

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

<script src="code.js"></script>





</html> 2. Pic­ture con­tainer The an­i­ma­tion is to be placed in­side an ar­ti­cle con­tainer that will use the 'data-pic­ture' at­tribute. Use of a con­tainer pro­vides bet­ter flex­i­bil­ity to con­trol the an­i­ma­tion from CSS and Javascript. It also makes sure that an­i­ma­tion el­e­ments can be kept sep­a­rate from other web page con­tent to avoid po­ten­tial prob­lems.

<ar­ti­cle data-pic­ture>

</ar­ti­cle> 3. CSS ini­ti­a­tion With the HTML now com­plete, you should cre­ate a new file called 'styles.css'. This step sets the page doc­u­ment and its body to have no vis­i­ble bor­der spac­ing. The page will ap­pear with a black back­ground, while the de­fault colour for con­tent to in­herit is set to ap­pear as white. html, body{ back­ground: #000; padding: 0; mar­gin: 0; color: #fff; } 4. Pic­ture con­tainer and chil­dren The con­tainer is set to a spe­cific size us­ing fixed po­si­tion­ing. The fixed po­si­tion­ing guar­an­tees that the an­i­ma­tion is al­ways vis­i­ble re­gard­less of scroll po­si­tion; change this to 'ab­so­lute' if you want it to scroll with the con­tent. An an­i­ma­tion called 'move' is ap­plied to re­peat with a du­ra­tion of 20 sec­onds. All child el­e­ments are set to dis­play as block el­e­ments us­ing ab­so­lute po­si­tion­ing. [data-pic­ture] { po­si­tion: fixed; width: 10cm; height: 2.5cm; an­i­ma­tion: move 20s in­fi­nite; } [data-pic­ture] > * { po­si­tion: ab­so­lute; dis­play: block; } 5. An­i­ma­tion def­i­ni­tion The 'move' an­i­ma­tion ap­plied in the pre­vi­ous step de­fines at­tribute states to tran­si­tion be­tween at key parts of the an­i­ma­tion. This ex­am­ple brings the an­i­ma­tion with con­tainer po­si­tioned out of view, tran­si­tion­ing into view at 30% of the way through the an­i­ma­tion. The fi­nal frame, at 100%, moves the pic­ture con­tainer out of view. @keyframes move {

0%{ left: -10cm; top: 0; opac­ity: 0;}

30%{ top: 50%; opac­ity: 1;}

100%{ left: 100vw; top:0; opac­ity: 0;} } 6. Bird cre­ation win­dow load The bird HTML is gen­er­ated by Javascript – keep­ing the HTML sim­ple and al­low­ing an op­por­tu­nity to in­crease the bird count with­out re­quire­ments for ex­tra code or con­tent. This can only be done when the page has fully loaded, hence the code be­ing in­side a func­tion that is trig­gered in re­sponse to the win­dow load event. win­­de­ventlis­tener("load", func­tion() { *** STEP 8 HERE }); 7. Bird HTML The bird HTML is cre­ated from the Javascript through a loop that counts from zero to the tar­get amount de­fined by the 'birds' vari­able. A ran­dom size and co­or­di­nate is also se­lected for each bird be­fore it is added to the HTML con­tent string. var html = ""; var birds = 30; for(var i=0; i<birds; i++){ var size = Math.ran­dom()*1.5; var x = Math.ran­dom()*100; var y = Math.ran­dom()*100; html += "<span style='font­size:"+size+"em; left:"+x+"%; top:"+y+"%;'>&gt;</span>" } 8. HTML to tar­get The fi­nal re­quire­ment of the Javascript is to send the gen­er­ated HTML to any page el­e­ment us­ing the 'data-pic­ture' at­tribute. The query­s­e­lec­torall is used to get a list of all of th­ese el­e­ments so that the gen­er­ated HTML can be ap­plied to them through their

'in­ner­html' at­tribute. var nodes = doc­u­ment. query­s­e­lec­torall("[data-pic­ture]"); for(var i=0; i<nodes.length; i++){

nodes[i].in­ner­html = html; }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.