Code a scrolling fore­ground back­ground over­lay ef­fect

This is a fea­ture that lets con­tent scroll un­der and over a stat­i­cally po­si­tioned back­ground el­e­ment

Web Designer - - Lightbox -

1. HTML doc­u­ment

The first step is to de­fine the HTML doc­u­ment. This con­sists of the HTML doc­u­ment con­tainer, which stores sec­tions for the head and body. While the head sec­tion is used to ref­er­ence ex­ter­nal CSS and Javascript re­sources, the body sec­tion is used in step 2 for the main page con­tent.

<!DOCTYPE html>



<ti­tle>back­ground Over­lay</ti­tle>

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

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



2. Body con­tent

The page body con­tent con­sists of a col­lec­tion of sec­tions that rep­re­sent the scrol­lable fore­ground and back­ground con­tent. Ad­di­tion­ally, the last el­e­ment in the body will be used as the stat­i­cally po­si­tioned con­tent. Po­si­tion­ing this el­e­ment as the last item within the page body can help with SEO by keep­ing main/im­por­tant con­tent higher in the HTML markup.














3. CSS fixed el­e­ment

Cre­ate a file called 'styles.css'. This step de­fines the pre­sen­ta­tion for the el­e­ment used as the fixed back­ground. The HTML is de­signed to al­ways have this el­e­ment placed last in the body, hence the use of the last-child se­lec­tor. Fixed po­si­tion­ing and z-in­dex are manda­tory re­quire­ments. Op­tional at­tributes in­clude top co-or­di­nate po­si­tion­ing and font-size. body > *:last-child{ po­si­tion: fixed; top: 25vh; font-size: 25vh; z-in­dex: 1; }

4. Sec­tion de­fault

Each sec­tion on the page shares a col­lec­tion of at­tributes for pre­sent­ing their size and po­si­tion. For the sake of vis­i­bil­ity, a red bor­der is also ap­plied so that you can see where each sec­tion starts and ends. The sec­tions are de­signed to cover the full space of the page in order to guar­an­tee abil­ity to scroll. sec­tion{ po­si­tion: ab­so­lute; dis­play: block; width: 100%; min-height: 100vh; bor­der: 1em solid red;

5. Sec­tion lay­ers

Sec­tions used for fore­ground and back­ground con­tent re­quire dif­fer­ent z-in­dex place­ment in order to ap­pear over or un­der the fixed back­ground el­e­ment. With the fixed el­e­ment us­ing a z-in­dex of one, the back­ground el­e­ment is set to use a z-in­dex of 0 while the fore­ground sec­tion uses a z-in­dex of 2. The HTML de­sign al­lows this to be eas­ily ap­plied us­ing odd and even val­ues with the nth-of-type se­lec­tor. sec­tion:nth-of-type(odd){

z-in­dex: 2; } sec­tion:nth-of-type(even){

z-in­dex: 0;

6. Pre­sen­ta­tion ex­tras

For pur­poses of pre­sent­ing the ef­fect, dif­fer­ent back­ground colours and mar­gin po­si­tion­ing are ap­plied to the con­tent el­e­ments in­side the fore­ground and back­ground sec­tions. This al­lows you to con­firm that the con­tent is be­ing placed cor­rectly for the de­sired over­lay and un­der­lay ef­fect. You could con­sider how this can be cus­tomised to the re­quire­ments of your real project. sec­tion:nth-of-type(odd) h2{ back­ground: red; mar­gin-top: 50vh; font-size: 3em; } sec­tion:nth-of-type(even) h2{ back­ground: sil­ver; mar­gin-top: 75vh; font-size: 3em; }

7. Sec­tion po­si­tion­ing

Cre­ate a new file called 'code.js'. Each pair of sec­tions used for the fore­ground and back­ground con­tent re­quire to share the same ver­ti­cal po­si­tion­ing. This is an un­nat­u­ral place­ment for just HTML and CSS, so in­ter­ven­tion from Javascript is re­quired. This step searches for each pair of sec­tions to cal­cu­late their shared ver­ti­cal po­si­tion. win­­de­ventlis­tener("load", func­tion(){

var sec­tions = doc­u­ment. query­s­e­lec­torall("body > sec­tion");

for(var i=0; i<sec­tions.length; i=i+2){

sec­tions[i] = ((i/2)*100)+"vh"; sec­tions[i+1] =

((i/2)*100)+"vh"; } });

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.