Create A Random Text Animation With Video Background

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