In­tro­duce a back­ground zoom ef­fect for page scrolling

Present a header sec­tion with a back­ground im­age that re­sizes in re­sponse to user scrolling

Web Designer - - Lightbox -

1. Doc­u­ment tem­plate

The first step is to de­fine the HTML doc­u­ment tem­plate. This con­sists of the HTML doc­u­ment con­tainer used to store the head and body sec­tions. While the head sec­tion is used to load ex­ter­nal CSS and Javascript re­sources, the body is a con­tainer for stor­ing the vis­i­ble page con­tent de­fined in step 2.

<!DOCTYPE html>



<ti­tle>back­ground Zoom</ti­tle>

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

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






2. Body con­tent

The vis­i­ble HTML con­tent con­sists of a 'header' sec­tion con­tain­ing a 'h1' head­ing, along with a con­tainer for the main page con­tent. The unique header sec­tion will be ref­er­enced by Javascript and CSS to ap­ply the im­age ef­fect. The use of the main con­tainer al­lows the ef­fect to avoid in­ter­fer­ing with the main page con­tent.


<h1>some Ti­tle</h1> </header>

<main> Con­tent goes here\


3. CSS doc­u­ment ini­ti­a­tion

Cre­ate a new file called 'styles.css'. This step ini­ti­ates the de­fault state of the doc­u­ment and body con­tain­ers. These are set to cover the full screen size, with de­fault colours for back­ground and text. Pad­ding is ap­plied to the bot­tom so that there is avail­able space to scroll for ob­ser­va­tion of the ef­fect. This pad­ding can be taken out for your real project. html,body{ dis­play: block; width: 100%; height: 100%; mar­gin: 0; pad­ding: 0; font-fam­ily: sans-serif; back­ground: sil­ver; color: #000; pad­ding-bot­tom: 300%; }

4. Header con­tainer

The header con­tainer is set to its re­quired size – set to match the width and height of the screen for this ex­am­ple. The back­ground im­age is ap­plied with both hor­i­zon­tal and ver­ti­cal po­si­tion­ing set to 'cen­ter'. The back­ground size is set to match 100% of both width and height of the header el­e­ment. header{ dis­play: block; po­si­tion: rel­a­tive; width: 100vw; height: 100vh; text-align: cen­ter; over­flow: hid­den; back­ground: url(back­ground.jpg) cen­ter cen­ter;

back­ground-size: 100% 100%; }

5. Header head­ing

The 'h1' el­e­ment in­side the header sec­tion is set with a colour and text shadow that will make it stand out from the back­ground im­age. The font size is also set so that its text ap­pears promi­nently – six times big­ger than the font size in­her­ited from the de­fault size for the page. header h1{ font-size: 6em; color: #c00; text-shadow: 2px 2px #000 }

6. Main con­tent

The main con­tent con­tainer is set to ap­pear across half of the page width us­ing a font size that’s three times big­ger than the de­fault page font. Auto is ap­plied to the side mar­gin to make sure that the main con­tent con­tainer is po­si­tioned in the mid­dle of the screen. main{ width: 50%; font-size: 3em; color: #fff; mar­gin: 0 auto 0 auto; }

7. Javascript scrolling lis­tener

Cre­ate a new file called 'code.js'. This step at­taches a

'scroll' event lis­tener to the browser win­dow. When page scrolling oc­curs, this func­tion will be trig­gered to cal­cu­late a new size for the back­ground im­age based on the new scroll po­si­tion. The cal­cu­la­tion uses the 'speed' vari­able to de­fine how fast the im­age should be zoomed in re­la­tion to the scrolling. Feel free to ex­per­i­ment by in­creas­ing or de­creas­ing the speed vari­able. win­­de­ventlis­tener("scroll", func­tion(){ var speed = 5; var size = 100+(win­dow.scrolly/speed); doc­u­ment.query­s­e­lec­tor("header"). style.back­ground­size = size+"% "+size+"%";


Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.