Web_Designer_UK__May_2018

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