Create A Changing Headline Effect

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