Cre­ated an an­i­mated tile ef­fect for con­tent in­tro­duc­tion

Mix Javascript and CSS func­tion­al­ity to add ad­vanced pre­sen­ta­tion to your con­tent

Web Designer - - Lightbox Ludwig -

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

The first step is to de­fine the page doc­u­ment. This con­sists of an HTML con­tainer, which it­self con­tains a header and body con­tainer. While the header is used pri­mar­ily to in­clude the ex­ter­nal CSS and Javascript re­sources, the body sec­tion will be used to store the vis­i­ble con­tent el­e­ments cre­ated in step 2.

2. Vis­i­ble con­tent

The vis­i­ble con­tent con­sists of two links that trig­ger the open­ing and clos­ing of the ef­fect, along with the con­tent con­tainer that has the ef­fect ap­plied to it. This con­tainer has an ID at­tribute as­signed as ‘ef­fect’, al­low­ing it to be ref­er­enced via HTML links. A class is also set to ‘tiled’, as well as two child div con­tain­ers, the first of which is where you put your text con­tent.

<p><a href="#ef­fect">click to see ef­fect</ a>.</p>

<div id="ef­fect" class="tiled">

<div>your text</div>




<p><a href="#">some­thing else</a>.</p>

3. Pop­u­late tiles

Cre­ate a new file called code.js to store the Javascript code. This code must wait un­til the page has fully loaded, upon where it will pop­u­late the last child of all el­e­ments us­ing the ‘tiled’ class. Tiles are made from a span el­e­ment, which has an in­ner span el­e­ment. Each of the tile con­tain­ers will store 25 tiles. win­­de­ventlis­tener("load",func­tion(){ var html = ""; for(var i=0; i<25; i++){ html += "<span><span></span></span>";

} var con­tain­ers = doc­u­ment. query­s­e­lec­torall(".tiled > *:last-child"); for(var i=0; i<con­tain­ers.length; i++){ con­tain­ers[i].in­ner­html = html



4. Tiled CSS

Cre­ate a new file called styles.css. The first rule inside this file de­fines how the main el­e­ment con­tainer is to be dis­played. This in­cludes the size, hid­ing any con­tent over­flow and po­si­tion­ing mode. Rel­a­tive po­si­tion­ing is im­por­tant for plac­ing the first child el­e­ment, which is de­fined in the next step. .tiled{ dis­play: in­line-block; po­si­tion: rel­a­tive; box-siz­ing: border-box; width: 20em; height: 20em; line-height: 0; over­flow: hid­den; }

5. Con­tent and tile lay­ers

The first child of the tiled con­tainer stores vis­i­ble con­tent such as text. Rel­a­tive po­si­tion­ing ap­plied to its par­ent in step 4, ab­so­lute po­si­tion­ing is placed in re­la­tion to the par­ent. This means that top and left set to zero is at the top-left cor­ner of the tiled con­tainer. The last child is used to store the back­ground tiles and must be sized to fit the full width and height set for the par­ent.

.tiled > *:first-child{ po­si­tion: ab­so­lute; top: 0; left: 0; z-in­dex: 100; mar­gin-top: 1em; }

.tiled > *:last-child{ width: 100%; height: 100%; mar­gin: 0; }

6. Outer tile

Each tile has two parts: an outer el­e­ment and an in­ner el­e­ment. The outer el­e­ment is set to a spe­cific size and must not show any con­tent over­flow; i.e. for clip­ping. This outer el­e­ment must also al­low it­self to be po­si­tioned along­side other tiles us­ing in­line-block. The in­ner el­e­ment must also be po­si­tioned ab­so­lutely, but rel­a­tive to wher­ever the outer el­e­ment is po­si­tioned, hence a po­si­tion mode of rel­a­tive.

.tiled > *:last-child > span{ po­si­tion: rel­a­tive; dis­play: in­line-block; float: left; width: 20%; height: 20%; over­flow: hid­den; }

7. In­ner tile

Ev­ery in­ner tile shares the same back­ground im­age, which must be sized to scale up to the full size of the par­ent con­tainer – by 600% in this case. They also must match the same size as the outer part of the tile. Ap­ply­ing a tran­si­tion to this el­e­ment means that all changes ap­pear an­i­mated. Top and left po­si­tion­ing set the in­ner tile out of view by de­fault.

.tiled > *:last-child > span > span{ po­si­tion: ab­so­lute; back­ground: url(im­age.jpg) #c00 100% top no-re­peat; back­ground-size: 600% 600%; mar­gin: 0; width: 100%; height: 100%; left: 100%; top: 100%; tran­si­tion: all .25s; tran­si­tion-tim­ing-func­tion: ease-in; }

8. Tar­get x po­si­tion

The tar­get se­lec­tor is used to de­tect when the par­ent con­tainer ID has been tar­geted in the URI. In­ner tile el­e­ments are set to po­si­tion them­selves into view via the left and top at­tributes. Each tile also needs to have its back­ground po­si­tion set to dis­play a spe­cific part of the im­age. We fo­cus on set­ting the x co­or­di­nate in this step. .tiled:tar­get > *:last-child > span > span{ left: 0; top: 0; }

.tiled:tar­get > *:last-child > span:nthchild(5n+1) > span{

back­ground-po­si­tion-x: 0; } .tiled:tar­get > *:last-child > span:nthchild(5n+2) > span{

back­ground-po­si­tion-x: 20%; } .tiled:tar­get > *:last-child > span:nthchild(5n+3) > span{

back­ground-po­si­tion-x: 40%; }

.tiled:tar­get > *:last-child > span:nthchild(5n+4) > span{

back­ground-po­si­tion-x: 60%; }

.tiled:tar­get > *:last-child > span:nthchild(5n+5) > span{

back­ground-po­si­tion-x: 80%; }

9. Tar­get y po­si­tion

Sim­i­lar to the pre­vi­ous step, rules are set to de­fine the y po­si­tion for each of the tiles. In­stead of defin­ing each tile in­di­vid­u­ally, the nth-child se­lec­tor is used to find el­e­ments at each nth and also a range af­ter that. For ex­am­ple, se­lect item six and the fol­low­ing five items to ap­ply a spe­cific back­ground y po­si­tion.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.