External JavaScript files are similar to the CSS ones you've already used. You must put the JavaScript file in your web directory and then link it to the pages you want to use it on.
JavaScript files end in the .js extension. Most JavaScript files used on the web are "minified" before they are used on a live site. This simply means that all of the extra spaces in the document have been removed and the variable names have been changed to be shorter. This is done to make the entire file size smaller. It also makes it unreadable. Minified files have the .min extension added before the .js extension. A file that ends in .min.js is a minified JavaScript file.
You can download a version of the skrollr the library from the link below. Hold down the option key when clicking the link to automatically download the file.
Copy the skrollr.min.js file into your animated-story folder.
Next, you need to add a link to the JavaScript file from your HTML page. You also need to "initialize" the skrollr code. For now don't worry too much about what this all means.
Add the four highlighted lines below to your document. You should put this code right before the closing body tag on your HTML page.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Animated Story Project</title> </head> <body> <!-- Your Animated Story content --><script type="text/javascript" src="js/skrollr.min.js"></script> <script type="text/javascript"> var s = skrollr.init(); </script></body> </html>
Skrollr includes some very basic CSS style rules that will help your page display. Put the CSS rules listed below in the top of your CSS stylesheet. Include them after any reset or normalize you are using.
/* Styles to make skrollable work. Copy these to your file. */
.skrollable {
position:fixed;
z-index:100;
}
.skrollr-mobile .skrollable {
position:absolute;
}
.skrollable .skrollable {
position:absolute;
}
.skrollable .skrollable .skrollable {
position:static;
}
/* End skrollable styles */