Web Designer - - Web Workshop -

1. Doc­u­ment ini­ti­a­tion

The first step is to ini­ti­ate the web page doc­u­ment.

This con­sists of the doc­u­ment con­tainer that stores the <body> and <head> sec­tions. While the <head> sec­tion is used to load the ex­ter­nal Javascript and CSS re­sources, the <body> sec­tion is used in Step 2 to store the web page’s con­tent el­e­ments.

<!DOCTYPE html>



<ti­tle>text Wipe Ef­fect</ti­tle>

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

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






2. Page body con­tent

The con­tent is made from an <h1> head­ing that is used to store a col­lec­tion of <span> tags. Each <span> tag stores one row of con­tent — with the last <span> tag stor­ing the items that will be re­peat­edly an­i­mated.

<h1> <span>test­ing</span> <span>test­ing</span> <span> <span>one</span> <span>two</span> <span>three</span> </span> </h1>

3. CSS: Gen­eral span styles

Cre­ate a new file called ‘styles.css’. The stylesheet sets pre­sen­ta­tion rules ap­plied to all <span> el­e­ments inside the <h1> tag. ‘Width’ and ‘over­flow’ are set for in­vis­i­bil­ity by de­fault, with ‘tran­si­tion’ set to an­i­mate change on width. These el­e­ments ap­pear at full width when the ‘open’ class is ap­plied. h1 span{ po­si­tion: rel­a­tive; dis­play: block; width: 0; min-height: 1em; tran­si­tion: width 3s; over­flow: hid­den; } h1{ width: 100%;


4. CSS: last item spans

Child spans for the re­peat­ing an­i­ma­tion re­quire ad­di­tional set­tings for their po­si­tion and ini­tial vis­i­bil­ity. Us­ing their par­ent’s rel­a­tive po­si­tion­ing, these el­e­ments are placed in the top-left cor­ner of their par­ent’s start­ing po­si­tion. Vis­i­bil­ity is ac­ti­vated when the ‘open’ class is ap­plied. The ‘span’ items within the first level <span> con­tainer re­quire spe­cific styling for their an­i­ma­tion. h1 span > span{ po­si­tion: ab­so­lute; top: 0; left: 0; opac­ity: 0; color: red; } h1 >{ opac­ity: 1;


5. Javascript Event func­tion

Cre­ate a new file called ‘code.js’. This step ini­ti­ates the ‘ef­fect’ func­tion, which will re­peat­edly call it­self ev­ery two sec­onds (2000 mil­lisec­onds) to up­date the an­i­ma­tion. This func­tion is kick­started by an im­me­di­ate call af­ter the web page has loaded. var ef­fect = func­tion(){

*** STEP 6 HERE set­time­out(func­tion(){ ef­fect() },2000); } win­­de­ventlis­tener(“load”, func­tion(){

ef­fect(); });

6. Open­ing first level spans

A search is per­formed to find the first child ‘span’ inside the <h1> par­ent that doesn’t have the ‘open’ class. The ‘open’ class is ap­plied If its par­ent is the ‘H1’ el­e­ment, trig­ger­ing the CSS an­i­ma­tion. If not, the code found in Step 7 is ex­e­cuted in­stead. var item = doc­u­ment.query­s­e­lec­tor(“h1 span:not(.open)”); if(item.par­entn­ode.tag­name == “H1”){

item.classlist.add(“open”); }else{

*** STEP 7 HERE }

7. Find last span chil­dren

Chil­dren of the last ‘span’ el­e­ment re­quire dif­fer­ent treat­ment for their an­i­ma­tion. A vari­able, ‘n’, ref­er­ences the in­dex of the item to up­date. Sib­lings to the item are iden­ti­fied for ap­pli­ca­tion of Step 8. The sib­ling at po­si­tion ‘n’ is up­dated with the ‘open’ class — trig­ger­ing the CSS an­i­ma­tion. var n = 0; var nodes = item.par­entn­ode.chil­dren; for(var i=0; i<nodes.length; i++){

*** STEP 8 HERE } nodes[n].classlist.add(“open”);

8. Node class check

Inside the ‘for’ loop from Step 7, each item is checked to see if it con­tains the ‘open’ class. If it does, the ‘n’ vari­able is up­dated with the next avail­able in­dex po­si­tion — re­set to ‘0’ if be­yond the last item. This step also at­tempts to re­move the ‘open’ class if it ex­ists. if(nodes[i].classlist.con­tains(“open”)){ var n = i+1; if(n >= nodes.length)n = 0; } nodes[i]­move(“open”);

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.