Web_Designer_UK__May_2018
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
LightBox<br />
Millennials Are Screwed<br />
Create a scroll up panel<br />
to reveal more content<br />
Create an interactive content cover that fades to reveal page content in response to user scrolling<br />
1. Initiate HTML<br />
The first step is to define the HTML document. All of the<br />
document is contained within the HTML container, which<br />
consists of the head and body sections. While the head<br />
section is responsible for loading the external CSS and<br />
JavaScript resources, the body section will store the<br />
content created in step 2.<br />
<br />
<br />
<br />
Scroll Fade<br />
<br />
<br />
<br />
<br />
*** STEP 2<br />
<br />
<br />
2. Content definition<br />
The HTML content consists of a header and main<br />
section. The header section is responsible for the 'cover'<br />
content that will be displayed to initially cover the full<br />
screen. The following main section will be used to store<br />
content that will move into view after the user starts to<br />
scroll the page.<br />
<br />
<br />
Once Upon a Time...<br />
<br />
<br />
In a land far away...<br />
<br />
3. Scroll listener<br />
Create a new file called 'code.js'. This JavaScript code<br />
must first wait for the page to load, upon which it will<br />
activate a page scroll event listener. When the user scrolls<br />
the page, a function will be triggered to search for the<br />
header section’s image, upon which some calculations<br />
will be performed to alter its size, positioning and opacity<br />
based on the current scroll position.<br />
window.addEventListener("load", function()<br />
{<br />
window.addEventListener("scroll",<br />
function(){<br />
var img = document.querySelector("header<br />
img");<br />
img.style.width = (100+(window.<br />
scrollY/20))+"%";<br />
img.style.left = (0-(window.<br />
scrollY/50))+"%";<br />
img.style.opacity = 1-(1/(window.<br />
innerHeight/window.scrollY));<br />
});<br />
});<br />
4. Body style<br />
Create a new file called 'styles.css'. The first part of the<br />
CSS sets the page to cover the full screen without any<br />
border spacing. This is achieved using the width and<br />
height attributes, along with margin and padding to<br />
eliminate any default spacing set by the browser. A black<br />
background and default font are also applied.<br />
html,body{<br />
display: block;<br />
width: 100%;<br />
height: 100%;<br />
margin: 0;<br />
padding: 0;<br />
font-family: "Trebuchet MS", Helvetica,<br />
sans-serif;<br />
background: #000;<br />
}<br />
5. Main container<br />
The main content container is set to cover half of the<br />
available screen width. A minimum height of double the<br />
screen height is set to guarantee the ability to scroll,<br />
regardless of how much content is set. The auto settings<br />
in the margin attribute are used to centrally align the<br />
container so that the child content automatically appears<br />
in the middle of the screen.<br />
main{<br />
width: 50%;<br />
min-height: 200%;<br />
font-size: 3em;<br />
color: #fff;<br />
margin: 10em auto 0 auto;<br />
}<br />
6. Header container<br />
The header container is set to display with relative<br />
positioning so that any child items can be positioned in<br />
relation to its location. Its height is set to match the<br />
screen height so that it covers the full space available.<br />
Hidden overflow is also applied to avoid excess cover<br />
content conflicting with the main content.<br />
header{<br />
display: block;<br />
position: relative;<br />
}<br />
height: 100vh;<br />
text-align: center;<br />
overflow: hidden;<br />
7. Header’s heading<br />
The H1 element inside the header is set to have specific<br />
size, colour and shadow settings. Other unique settings<br />
can also be applied in this definition. The application of<br />
the text shadow helps to avoid any conflict in the<br />
background image where colours may be difficult for the<br />
user to distinguish the text from.<br />
header h1{<br />
font-size: 6em;<br />
color: #c00;<br />
margin-top: 0;<br />
text-shadow: 2px 2px #000<br />
}<br />
***<br />
8. Header’s children<br />
Settings for all first level children of the header are set to<br />
share properties. This approach avoids having to repeat<br />
settings for each unique item; keeping the CSS small and<br />
manageable. All children will used fixed positioning<br />
placed in the top-left corner. They will also have a width<br />
matching the header container, along with margining to<br />
centrally align them.<br />
header > * {<br />
position: fixed;<br />
top: 0;<br />
left: 0;<br />
margin: 0 auto 0 auto;<br />
width: 100%;<br />
}<br />
lightbox _________________________________________________17