Where do I start?
So you’ve got yourself an amazing website or template and you’re ready to use imagine 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 imagine’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.
imagine/assets my-website/assets
What’s next?
Let’s say that you want o add parallax effects to your homepage, the index.html file. Now that we’ve copied the dependencies for integrating imagine, 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 Stylesheets
First, we’ll add our stylesheets: the .css files that we copied. Stylesheets are used to design how a page looks like. Whenever you want to add a new stylesheet to your webpage, you use the link tag and point the path to that file. The stylesheets need to be placed inside the <head> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
<!-- Imagine Stylesheets -->
<link href="assets/css/imagine/imagine.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
As you can see, we’re using the assets/css path for the imagine assets folder. In case your assets are located in a different folder, please make sure you use the correct path.
Adding Scripts
Next we need to add the scripts that we copied: the .js files. Scripts are used to add custom functionality to your page, such as parallax backgrounds. 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>
<!-- Imagine stylesheets -->
<link href="assets/css/imagine/imagine.css" rel="stylesheet">
</head>
<body>
...
<!-- Imagine 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/animus/animus.js" type="text/javascript"></script>
<script src="assets/js/imagine/imagine.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 imagine and create amazing parallax effects.