Part 3 of our Web Animation Series - JavaScript Video Effect
| | |
|
Welcome to our Web Animation Series
This is the third part of a short series on Animation that will be extended to four.
It is aimed primarily, at beginners and so far we have introduced both JavaScript and CSS animation.
Click here for Part 1 or Part 2.
Let's go back and expand our knowledge of JavaScript animation.
| |
|
|
In Part 1 we learned that JavaScript Animation uses the JavaScript scripting language to modify the properties of objects within the DOM (Document Object Model).
We created two fun animations that didn't really have any practicle application. So this time, we will create one that can actually be used in a contemporary Website.
What I have chosen to show you this time is a transition or fade, similar to a video effect when one scene wipes to another, from left to right.
See our Animation Glossary for an explanation of Fades.
So, let's get started with an Example.
| |
|
|
Example Animation 1: Wipe
We're back to using Javascript again, so there are three Languages involved:
HTML creates the objects, CSS the styles and JavaScript the animation.
Let's go through them.
| |
|
|
Example 1: HTML
<span class="css1_Button">
<a class="css1_Button" href="JavaScript:js_Animate('htm1_wipe');">
Start
</a>
</span>
<div id="htm1_wipe" class="css1_wipe"></div>
The HTML includes a Button to start the animation and a <div> that covers or masks the page and wipes from left to right.
css1_button has been modeled after the Button class provided by the Website.
| |
|
|
Example 1: CSS
div.css1_wipe {
position: absolute;
top: 0px; left: 0px; width: 0px; height: 0px;
background: black; opacity: 0;
z-index: 1;
}
span.css1_button {
background: turquoise;
color: white;
vertical-align: middle;
border: 0; margin: 0; padding: 14px 10px 10px 10px;
}
a.css1_button {
background: inherit;
color: inherit;
text-decoration: none;
}
span.css1_button:hover, a.button:hover {
background: darkturquoise;
text-decoration: underline;
}
The CSS is really simple.
Notes:
- You probably have noticed that the wipe mask has no width or height
- This is set in the JavaScript each time the wipe is started, to allow for any resizing of the Browser Window
- For the purposes of this Article I create a large mask and shrink it down until it matches the page's scroll size
- I could have sized it otherwise but again, I wanted to keep things simple
| |
|
|
Example 1: JavaScript
function js_Clear(wipeObject) {
var hWipe = document.all(wipeObject);
if (hWipe) {
hWipe.style.top = 0;
hWipe.style.left = 0;
hWipe.style.width = 0;
hWipe.style.height = 0;
hWipe.style.opacity = 0;
}
}
function js_Init(wipeObject) {
var hWipe = document.all(wipeObject);
if (hWipe) {
hWipe.style.top = 0;
hWipe.style.left = 0;
hWipe.style.width = 2000;
hWipe.style.height = 6000;
hWipe.style.opacity = 1;
// Correctly size wipe 'mask'
var bodyWidth = document.body.scrollWidth;
var width = bodyWidth;
var bodyHeight = document.body.scrollHeight;
var height = bodyHeight;
var decr = 500;
do {
width -= decr;
hWipe.style.width = width + 'px';
bodyWidth = document.body.scrollWidth - decr;
} while (width > bodyWidth) {}
do {
height -= decr;
hWipe.style.height = height + 'px';
bodyHeight = document.body.scrollHeight - decr;
} while (height > bodyHeight) {}
hWipe.style.width = document.body.scrollWidth + 'px';
hWipe.style.height = document.body.scrollHeight + 'px';
}
}
function js_Animate(wipeObject) {
var hWipe = document.all(wipeObject);
if (hWipe) {
// Initialise wipe 'mask'
js_Init(wipeObject);
var width = document.body.scrollWidth;
var height = document.body.scrollHeight;
var steps = 50; // Number of animation steps
var mTime = 500; // Total animation time in milli-seconds
var i = 1;
var x = width / steps;
var y = height / steps;
var hIntShrink = setInterval(js_AnimateWipe, (mTime / steps));
function js_AnimateWipe() {
hWipe.style.left = (i * x) + 'px';
hWipe.style.width = (width - (i * x)) + 'px';
i++;
if (i > steps) {
clearInterval(hIntShrink);
js_Clear(wipeObject);
}
}
} else {
js_Clear(wipeObject);
}
}
The JavaScript really isn't too complicated.
I'll go through the functions:
- js1_Clear(): Clears the wipe mask by reducing its size to zero
- js1_Init(): Creates a large mask and shrinks it down until it matches the actual scroll size, as I mentioned previously
- js1_Animate(): Sets up the timing and movement parameters and calls js1_AnimateWipe() at regular intervals
- js1_AnimateWipe(): Performs one cycle of movement. When called at regular intervals by js1_Animate(), it creates animation
Note: The fade mask id is passed to the JavaScript functions so that we can use the same script for both examples in this Article.
Try the interactive example below.
| |
|
|
Interactive Example: Wipe
This example displays a wipe for the entire page:
Start
| |
|
|
Example Animation 2: iFrame Wipe
The second example uses an iFrame to demonstrate how you can apply this effect to your own Website.
As I mentioned previously the same Javascript is used for this example.
| |
|
|
Example 2: HTML
<html>
<head>
<link rel="StyleSheet" href="anim82.css" type="text/css">
<script src="anim8.js" language="JavaScript"></script>
<title>The BoK - Web Animation Example</title>
</head>
<style>
</style>
<body onload="js_Animate('wipe')">
<table>
<tr>
<td>
This is an HTML page in an iFrame
</td>
</tr>
<tr>
<td>
Submitting the page triggers the onload event
</td>
</tr>
<tr>
<td>
The onload event calls js_Animate()
</td>
</tr>
<tr>
<td>
js_Animtate() animates a <i>wipe</i>
</td>
</tr>
<tr>
<td>
<span class="button">
<a class="button" href="">
Submit
</a>
</span>
</td>
</tr>
</table>
<div id="wipe" class="wipe"></div>
</body>
</html>
The HTML is complete as it is used to create the page within the iFrame.
The Body has an onload event that calls js1_Animate() whenever the page is loaded. So submitting the page will animate a wipe.
| |
|
|
Example 2: CSS
body {
background: paleturquoise;
font-family: "Monaco", "Times New Roman", "Helvetica", "Arial";
font-style: normal; font-weight: bold; font-size: 4rem;
}
table {
width: 100%; height: 100%;
}
table td {
height: 20%;
text-align: center;
}
span.button {
background: turquoise;
color: white;
border: 0; margin: 0; padding: 10px;
}
a.button {
background: inherit;
color: inherit;
text-decoration: none;
}
span.button:hover, a.button:hover {
background: darkturquoise;
text-decoration: underline;
}
div.wipe {
position: absolute;
top: 0px; left: 0px; width: 0px; height: 0px;
background: black; opacity: 0;
z-index: 1;
}
The CSS is relatively simple.
It includes styling for the body, tables, cells and a Button. The wipe styling is the same as the last example.
The following interactive example uses an iFrame that acts on itself only.
| |
|
|
| |
|
|
Conclusion
Well I hope you enjoyed this contemporary example that you can experiment with and modify to suit your own pages.
We'll wrap-up this series in Part 4, where I hope to amalgamate the techniques we have covered so far.
Until then, if you have any comments, questions or criticisms please contact us here.
| |
|
|
| John Berry - Nov 2020 | |
| John Berry is a Software Engineer with over 25 years experience in Net Technology and our resident CSS expert. | |
| © 2020 www.101world.net |
℗ 2020 www.101world.net |
| |
|
The BoK ... brought to you by 1.01 World Net
The BoK is a Book, a Body of Knowledge,
a collection of Articles, a Knowledge Base
of interesting and useful Information.
