Your first parallax background
If you’ve followed the Getting Started guide, by now you should have the assets needed for imagine in the right place and included in the webpage.
Parallax backgrounds have a very simple markup. First, we have a wrapper with the imagine class, which doesn’t let the background overflow. Next, we have the actual background image, to which we will apply the parallax effect.
<!-- Imagine -->
<div class="imagine">
<!-- Your content here -->
<!-- Background -->
<!-- To change the background, modify the src=".." attribute -->
<img class="imagine-background" src="assets/img/background-1.jpg">
</div>
Place the code above at the beginning of your <body> tag to use imagine as a header.
Ready, steady, go!
Now that we’ve added the markup for our parallax background, all that’s left for us to do is to initialize imagine. Place the following initialization script before the end of your <body> tag, right after all the scripts we’ve included earlier.
<script>
$(document).ready(function(){
$('.imagine').imagine();
});
</script>
Whoa!
Your first parallax background is ready. Your result should look just like this one:
Here’s the complete code for a page containing imagine. If you’ve done everything correctly, your page markup should follow the pattern below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My webpage</title>
<!-- Imagine stylesheets -->
<link href="assets/css/imagine/imagine.css" rel="stylesheet">
</head>
<body>
<!-- Imagine -->
<div class="imagine">
<!-- Your content here -->
<!-- Background -->
<!-- To change the background, modify the src=".." attribute -->
<img class="imagine-background" src="assets/img/background-1.jpg">
</div>
<!-- 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>
<script>
$(document).ready(function(){
$('.imagine').imagine();
});
</script>
</body>
</html>