January 2019 - Graphic Designer Vs Web Designer

Create A Fading Previous/Next Content Navigation

Kamal Thakur Monday, January 07, 2019

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; }

YouTube

Download Code

Create A Fading Previous/Next Content Navigation

Reviewed by Kamal Thakur on Monday, January 07, 2019 Rating: 5

Create An Interactive Navigation Image Control

Kamal Thakur Monday, January 07, 2019

Create An Interactive Navigation Image Control

Make empty space more appealing with this eye-catching animated effect

Download Code

STEP 1: Page initiation

The first step of creating the webpage is the definition of the HTML document. This consists of HTML to define the document container, which in turn stores the head and body sections. While the head section is used to load external JavaScript and CSS resources, the body section is used to contain the visible HTML content created in step 2.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Navigation Imagery</title>

href="styles.css" />

js"></script>

</head>

<body>

*** STEP 2 HERE

</body>

</html>

STEP 2: HTML Content

The navigation content is kept to a minimum, with a specific focus on defining the navigation content. This consists of the navigation container and its associated links. Each link has a 'title' attribute that will be used as a reference to influence visual styling in later steps, with the help of JavaScript and CSS.

CODE:

</nav>

STEP 3: Event Management

Create a new file called 'code.js'. Upon completion of the page loading, this code will search for all of the 'a' links inside the 'mainNavigation' from step 2. A 'for' loop is used to apply a 'mouseover' event listener to each item found. This event listener will set an attribute called 'data-theme' on the parent 'mainNavigation' container, which is to be set as the title attribute of the 'mouseover' link.

CODE:

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

var nodes = document.

querySelectorAll("#mainNav a");

for(var i=0; i<nodes.length; i++){

nodes[i].

addEventListener("mouseover", function(){

this.parentNode.

setAttribute("data-theme", this.

getAttribute("title"));

});

}

});

STEP 4: CSS Initiation

Create a new file called 'styles.css'. This step initiates the CSS with the general page styling. Specifically, all elements are set to use 'border-box' for including padding as part of width calculations. The page is set to have no visible border spacing through margin and padding, as well as the default font for content to inherit.

CODE:

*{ box-sizing: border-box; }

html,body{

display: block;

margin: 0;

padding: 0;

font-family: Helvetica, sans-serif;

color: #000;

}

STEP 5: Navigation Container

The navigation container is set to use fixed positioning so that it always remains visible. Its width is set to half of the browser window, with settings to present any background image to cover 40% of the right side.

CODE:

#mainNav{

position: fixed;

display: block;

width: 50vw;

transition: background 1s;

background-repeat: no-repeat;

background-position: right center;

background-size: 40%;

}

STEP 6: Navigation Items

Each item inside the navigation container is set to display across 50% of the navigation – leaving space for its associated item. Each item is set with a border, padding and margin to appear distinct from each other. Alternative background and font colours are used when items are being hovered with the mouse pointer.

CODE:

#mainNav a{

display: block;

width: 50%;

color: #000;

padding: 1em;

margin-top: .5em;

border: 1px solid;

}

#mainNav a:hover{

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

color: #fff; }

STEP 7: Image Definition

The final step is to associate the images to display for each of the navigation links. With the JavaScript from step 3 setting the 'data-theme' attribute of the parent container to match the title of the latest hovered link, this step is used to specify the background image for each value that 'data-theme' could be set to.

CODE:

#mainNav[data-theme="Page 1"]{

}

#mainNav[data-theme="Page 2"]{

}

#mainNav[data-theme="Page 3"]{

}

YouTube

Download Code

Create An Interactive Navigation Image Control

Reviewed by Kamal Thakur on Monday, January 07, 2019 Rating: 5

Create A Random Text Animation With Video Background

Kamal Thakur Monday, January 07, 2019

Use JavaScript and CSS to create an animated content overlay for a full-screen video background

Download Code

STEP 1: Initiate The HTML Document

The first step is to initiate the structure of the HTML document. This consists of the document container that stores the head and body sections. While the head section is used to load the external CSS and JavaScript resources, the body will contain the visible page content created in the next step.

STEP 2: HTML Content

The foreground page content is placed inside the 'main' container to deliver the advantage of easy control of content flow. The text element has the 'overlay' class applied so that it can be referenced by the JavaScript and CSS for applying the text animation. Multiple elements can have the animation applied by using the 'overlay' class.

CODE:
<main>
<h2 class="overlay">
This is a story all about how...
</h2>
</main>
*** STEP 3 HERE

STEP 3: HTML Video Element

The final part of the HTML is to define the background video element. Not all browsers are able to support each video standard, hence the need to specify different sources. The browser will display the first source it is able to support. Take note of how the video element has the 'autoplay', 'muted' and 'loop' attributes applied so that it automatically plays and repeats without sound.

CODE:
<video autoplay muted loop>
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
<source src="http://techslides.com/
demos/sample-videos/small.ogv" type="video/ogg" />
<source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp" />
</video>

STEP 4: CSS Initiation

Create a new file called 'styles.css'. The first step in this file is to define the properties of the 'main' content container. Default settings for font and colour are applied for child content to inherit. Auto values are applied to the side margins so that child content appears centrally aligned.

CODE:
main {
font-family: Helvetica, sans-serif;
color: #fff;
padding: 2em;
width: 75%;
min-height: 100vh;
margin: 0 auto 0 auto; }

STEP 5: Video Element Styling

The background element requires specific styling in order for the effect to work. Firstly, fixed positioning is important to guarantee that it stays in the same position if the user scrolls the page. Secondly, it must use a negative z-index that will guarantee its position underneath the main page content. Transform and size are also used to set the element’s size and location to cover the full-page window.

CODE:
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -9999;
transform: translateX(-50%)
translateY(-50%);
background: #000; }

STEP 6: Overlay Children

The 'overlay' element will be manipulated by JavaScript to split each letter of its text content to be wrapped by a span tag. This allows individual letters to be animated via CSS. Firstly, the default settings for the 'span' letters are defined to have relative positioning, invisible opacity and an applied 'animateOverlay' animation. Secondly, a delay to their animation is applied based on their child positioning.

CODE:
.overlay span{ position: relative; opacity: 0; top: 1em; animation: animateOverlay 1s ease-inout forwards;}
.overlay span:nth-child(4n) { animation-delay:0s; }
.overlay span:nth-child(4n+1) { animationdelay:1s; }
.overlay span:nth-child(4n+3) { animationdelay:2s; }
.overlay span:nth-child(4n+2) { animationdelay:3s; }

STEP 7: Overlay Animation

The animation applied to each span element consists of just one frame that the elements will animate towards. This sets their opacity to become fully visible, along with their vertical positioning to animate towards their default text flow position. Take note of how step 6 sets each span element to be pushed down by 1em.

CODE:
@keyframes animateOverlay {
to {
opacity: 1;
top: 0;
} }

STEP 8: Overlay Search

Create a new file called 'code.js'. This first step will search for all of the elements using the 'overlay' class – of which a 'for' loop is used to apply the code in step 8. These elements are not available until after the page has loaded, so they need to be placed inside an event listener in the browser window that is triggered on its load completion.

CODE:
window.addEventListener("load", function(){
var nodes = document.
querySelectorAll(".overlay");
for(var i=0; i<nodes.length; i++){
*** STEP 9 HERE
}
});

STEP 9: Text Manipulation

Each element found in step 8 needs to have its HTML contents redefined to have each letter inside a span element. This is achieved by reading its plain text using 'innerText', and then using a second 'for' loop to individually add each letter to the new version of the HTML – complete within its span tag. After each letter has been read, the parent node’s 'innerHTML' is updated with the new HTML.

CODE:
var words = nodes[i].innerText;
var html = "";
for(var i2=0; i2<words.length; i2++){
if(words[i2] == " ")html +=
words[i2];
else html +=
"<span>"+words[i2]+"</span>"
}
nodes[i].innerHTML = html;

YouTube

Download Code

Create A Random Text Animation With Video Background

Reviewed by Kamal Thakur on Monday, January 07, 2019 Rating: 5

Create Glitchy, Blinking Text Effects

Kamal Thakur Monday, January 07, 2019

Create Glitchy, Blinking Text Effects

Download Code

STEP 1: Blinking Letters

To make the blinking letter effect found on betamatters, add some images to the page that will act as the text to make blink on and off. The structure shown below is a minimal way to achieve this effect:

CODE:

</div>

STEP 2: Style The Content

Now the content of the page will be styled with the background getting the right colour and the letter being given the right size. The opacity is turned off so that with JavaScript the ‘anim’ class can be added.

CODE:

body{

background: #5700c8;

}

.letter{

width: 150px;

opacity: 0;

}

.anim{

animation: glitch 1s forwards;

}

STEP 3: Blinking With Keyframes

Using keyframes, the 'anim' class in the previous step uses these to change the opacity and make the letters blink on and off as they appear onscreen.

CODE:

@keyframes glitch {

0% {opacity: 0;}

40% {opacity: 1;}

45% {opacity: 0;}

50% {opacity: 1;}

55% {opacity: 0;}

85% {opacity: 1;}

90% {opacity: 0;}

100% {opacity: 1;}

}

STEP 4: Making It Work

To make this effect work, first of all, the letters — which are child elements of the 'wrap' div — are placed into an array called 'letters'. The selected letter will be stored in the 'sel' variable.

CODE:

var elem = document.getElementById('wrap');

var letters = [];

var sel;

for(i=0; i<elem.children.length; i++){

letters.push(elem.children[i]);

}

STEP 5: Generate A Letter

The 'generate' function will randomly select one of the letters in the array and run a 'setTimout' to call the 'animate' function at a random time so that the letters appear more glitchy.

CODE:

function generate(){

sel = Math.floor(Math.random()*letters.

length);

setTimeout(animate, (Math.

random()*500)+100);

}

STEP 6: Animating The Letter

The 'animate' function adds the 'anim' class to the letter and then removes this letter from the array so that it can't be called again. The 'generate' function is called to run which starts the whole process working.

CODE:

function animate(){

letters[sel].classList.add("anim");

letters.splice(sel, 1);

if( letters.length > 0 ){

generate();

}

generate();

YouTube

Download Code

Create Glitchy, Blinking Text Effects

Reviewed by Kamal Thakur on Monday, January 07, 2019 Rating: 5

Create A Changing Headline Effect

Kamal Thakur Monday, January 07, 2019

Create A Changing Headline Effect

Download Code

STEP 1: Document Initiation

The first step is to initiate the web page document. This consists of the document container that stores the <body> and <head> sections. While the <head> section is used to load the external JavaScript and CSS resources, the <body> section is used in Step 2 to store the web page's content elements.

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Text Wipe Effect</title>

</head>

<body>

*** STEP 2 HERE

</body>

</html>

STEP 2: Page Body Content

The content is made from an <h1> heading that is used to store a collection of <span> tags. Each <span> tag stores one row of content — with the last <span> tag storing the items that will be repeatedly animated.

CODE:

<h1>

<span>Testing</span>

<span>

<span>Three</span>

</span>

</h1>

STEP 3: CSS - General Span Styles

Create a new file called 'styles.css'. The stylesheet sets presentation rules applied to all <span> elements inside the <h1> tag. ‘Width’ and ‘overflow’ are set for invisibility by default, with ‘transition’ set to animate change on width. These elements appear at full width when the 'open' class is applied.

CODE:

h1 span{

position: relative;

display: block;

width: 0;

min-height: 1em;

transition: width 3s;

overflow: hidden;

}

h1 span.open{

width: 100%;

}

STEP 4: CSS - Last Item Spans

Child spans for the repeating animation require additional settings for their position and initial visibility. Using their parent's relative positioning, these elements are placed in the top-left corner of their parent’s starting position. Visibility is activated when the 'open' class is applied. The 'span' items within the first level <span> container require specific styling for their animation.

CODE:

h1 span > span{

position: absolute;

top: 0;

left: 0;

opacity: 0;

color: red;

}

h1 span.open > span.open{

opacity: 1;

}

STEP 5: JavaScript Event Function

Create a new file called 'code.js'. This step initiates the 'effect' function, which will repeatedly call itself every two seconds (2000 milliseconds) to update the animation. This function is kickstarted by an immediate call after the web page has loaded.

CODE:

var effect = function(){

*** STEP 6 HERE

setTimeout(function(){

effect()

},2000);

}

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

effect();

});

STEP 6: Opening First Level Spans

A search is performed to find the first child 'span' inside the <h1> parent that doesn’t have the 'open' class. The 'open' class is applied If its parent is the 'H1' element, triggering the CSS animation. If not, the code found in Step 7 is executed instead.

CODE:

var item = document.querySelector("h1

span:not(.open)");

if(item.parentNode.tagName == "H1"){

item.classList.add("open");

}else{

*** STEP 7 HERE

}

STEP 7: Find Last Span Children

Children of the last 'span' element require different treatment for their animation. A variable, 'n', references the index of the item to update. Siblings to the item are identified for application of Step 8. The sibling at position 'n' is updated with the 'open' class — triggering the CSS animation.

CODE:

var n = 0;

var nodes = item.parentNode.children;

for(var i=0; i<nodes.length; i++){

*** STEP 8 HERE

}

nodes[n].classList.add("open");

STEP 8: Node Class Check

Inside the 'for' loop from Step 7, each item is checked to see if it contains the 'open' class. If it does, the 'n' variable is updated with the next available index position — reset to '0' if beyond the last item. This step also attempts to remove the 'open' class if it exists.

CODE:

if(nodes[i].classList.contains("open")){

var n = i+1;

if(n >= nodes.length)n = 0;

}

nodes[i].classList.remove("open");

YouTube

Download Code