Web_Designer_UK__May_2018

EXPERT ADVICE
Using body labelling
Using JavaScript to apply a status
label to the body section is an easy
way to keep code simple and allowing
visual reactions to be controlled from
CSS. Take this further by applying
additional labels to describe specific
events that have occurred relating to
user interactions or other events.
What our
experts think
of the site
Create multiple fade background colours
DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
Avoid complexity to avoid headaches
It’s worth spending extra time to identify the simplest way to create effects like
this. Placing too much responsibility within JavaScript increases scope for future
changes breaking functionality, costing time to fix. This example avoids the
problem by keeping JavaScript’s involvement to a minimum.
Leon Brown, freelance web developer and trainer
Technique
1. Initiate HTML document
The first step is to initiate the HTML document that will
be the framework for storing the content and loading
external resources. This document contains a head
section that loads CSS and JavaScript resources, along
with a body section for defining the visible content in
step 2.
Scrolling Background Change
*** STEP 2 HERE
2. Body content
The main content can consist of any HTML, providing
that it covers enough space to allow for scrolling. This
example will use an article container that will be
controlled via CSS to allow for scrolling.
Content
3. JavaScript scrolling
Create a new file called ‘code.js’. This JavaScript listens for
a scrolling event, upon which it calculates a screen
number based on the vertical scroll position and sets the
DOM body’s ‘data-screen’ attribute as this value. Any
visual changes to ‘data-screen’ can now be defined via
some CSS.
window.addEventListener(“load”,function(){
window.addEventListener(“scroll”,function(){
var screen = Math.round(window.scrollY/
window.innerHeight);
document.body.setAttribute(“data-screen”,
screen);
})
});
4. CSS screen definition
Create a new file called ‘styles.css’. The ‘data-screen’
attribute applied to the DOM body via the JavaScript is
used to define the default screen properties. Its
background colour is set to white, while a transition is set
to animate changes to the background colour over a
duration of one second.
[data-screen]{
background: #fff;
transition: background-color 1s;
}
5. Screen colour changes
The JavaScript processing of scrolling events from step 3
allows CSS to define presentation rules for specific
positions. Each count of ‘data-screen’ is the full height of
the browser screen. This step sets different background
colours as the user scrolls down the equivalent of a full
screen height.
[data-screen=”1”]{ background-color: red; }
[data-screen=”2”]{ background-color: green; }
[data-screen=”3”]{ background-color: blue; }
6. Example content size
Due to this example not having five screen heights of
content to produce the required scrolling, this step sets
the article container to fit this size. This allows you to test
the effect before committing to inserting the content.
article{
display: block;
min-height: 400vh; }
workshop _____________________________________________ 61