Create A Fading Previous/Next Content Navigation

Create A Fading Previous/Next Content Navigation

Use the HTML article element to generate an animated previous/next content navigation feature

Download Code

STEP 1: Initiate The Document

The first step is to initiate the web page as an HTML document. This consists of defining the HTML container, which stores the <head> and <body> sections. While the <head> section references the external CSS and JavaScript resources, it is the <body> section which stores the page content — created in Step 2.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Screen Nav</title>

media="screen" href="styles.css"/>

javascript"></script>

</head>

<body>

*** STEP 2 HERE

</body>

</html>

STEP 2: Page Content

The page content consists of a <main> container that is used to store the primary page content, followed by two elements that will be used as navigation controls. Each article has a unique ID that can be used by CSS and JavaScript to present the individual content sections when they are required.

CODE:

<main>

<h1>Section 1</h1>

</article>

<h1>Section 2</h1>

</article>

<h1>Section 3</h1>

</article>

</main>

STEP 3: JavaScript - Navigation Function

Create a new file called 'code.js'. The first part of this JavaScript code defines the 'nav' function that will be called in response to interactions with the navigation controls. Its parameter accepts details about the event, including a reference to the navigation control. The index value is calculated and used to update the window URL using the associated article ID — defined in Step 4.

CODE:

function nav(e){

e.preventDefault();

if(e.target.getAttribute("data-nav")

== "left" && nav.index > 0){

nav.index--;

}else if(e.target.getAttribute("datanav")

== "right"){

if(nav.index < nav.nodes.

length-1){

nav.index++;

}

window.location.href = "#"+nav.

nodes[nav.index].getAttribute("id");

}

nav.index = 0;

nav.max = 0;

STEP 4: JavaScript - Load setup

The JavaScript code must wait for the page to finish loading before it can reference the page content. We achieve this by placing the initiation code inside a 'load' event listener applied to the window. The 'nav' function is provided with a list of articles inside the <main> container, as well as the ‘nav’ function being applied in response to 'click' events on the navigation controls.

CODE:

window.addEventListener("load", function(){

var nodes = document.

querySelectorAll("[data-nav]");

nav.nodes = document.

querySelectorAll("main > article");

nodes[0].addEventListener("click", nav);

nodes[1].addEventListener("click", nav);

});

STEP 5: CSS Articles

Create a new file called 'styles.css'. This step defines the default presentation for the articles inside the main container. These elements are set to be placed in the top-left corner of the browser window and to cover the full page. The visibility are hidden using 'opacity' and 'z-index', with a transition on their opacity set to animate them into view when required.

CODE:

main > article{

position: absolute;

display: block;

height: 100%;

width: 100%;

top: 0;

left: 0;

opacity: 0;

transition: opacity 1s;

overflow: scroll;

z-index: 0;

color: #fff; }

STEP 6: Article Activation

The 'nav' function defined in Step 3 will trigger changes in the page URI that references individual articles using their ID. CSS detects this using the 'target' selector, in which this step changes their default 'z-index' and 'opacity' to become visible. This step also sets individual background colours for the articles using their ID references.

CODE:

main article:target{

z-index: 2;

opacity: 1;

}

main article[data-previous]{

z-index: 1;

}

#p1{ background: red; }

#p2{ background: green; }

#p3{ background: blue; }

STEP 7: Navigation Controls

The navigation controls are identified using their 'data-nav' attribute. They share a set of common presentation rules such as fixed positioning, vertical location and 'z-index'. These are important to remain visible in the same location above the page content regardless of scroll location. Unique horizontal styles are applied using the value of their ‘data-nav’ attribute.

CODE:

[data-nav]{

position: fixed;

top: 45vh;

font-size: 3em;

width: 1em;

color: #fff;

z-index: 9999;

background: rgba(0,0,0,.5);

}

[data-nav="left"]{ left: 0; }

[data-nav="right"]{ right: 0; }