Where do I start?
So you’ve got yourself an amazing website or template and you’re ready to use reveal to make it even better. The first step, whether you’re starting a new website from scratch or using a premade website, is to copy reveal’s dependencies into your project folder.
What files do I need to copy?
All of the required files reside in the assets folder. Simply copy the assets folder found in the .zip file downloaded from CodeCanyon to your own project folder. The copied files also contain the styles, scripts and images needed for the documentation and templates. Only the assets/js folder is required to use reveal.
reveal/assets my-website/assets
What’s next?
Let’s say that you want o add scroll reveal animations to your homepage, the index.html file. Now that we’ve copied the dependencies for integrating reveal, let’s include them in the page. The structure of any webpage, including the one you’re editing, is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
</head>
<body>
...
</body>
</html>
Adding Scripts
Now we need to add the scripts that we copied ( the .js files ) to our page. Scripts are used to add custom functionality to your page. Whenever you want to add a new script to your webpage, you use the script tag and point the path to the script file. Script tags always go at the bottom of the page, right before the <body> tag closes, as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
</head>
<body>
...
<!-- Reveal Scripts -->
<script src="assets/js/jquery/jquery.js" type="text/javascript"></script>
<script src="assets/js/gsap/tweenlite.js" type="text/javascript"></script>
<script src="assets/js/gsap/plugins/css.js" type="text/javascript"></script>
<script src="assets/js/gsap/easing/easepack.js" type="text/javascript"></script>
<script src="assets/js/animus/animus.js" type="text/javascript"></script>
<script src="assets/js/animus/presets/default.js" type="text/javascript"></script>
<script src="assets/js/reveal/reveal.js" type="text/javascript"></script>
</body>
</html>
We put the <script> tags at the end of the page to improve page load speed.
You’re ready!
That’s it! You’ve just integrated the plugin into your webpage. Now you’re ready to use the full power of reveal and create amazing scroll reveal animations.