The parallax scrolling?
The parallax scrolling is a concept where background (that generally is the image(s) with 3D effects) moves slower than the foreground. This concept is particularly popular for one-page websites.
There are many plug-ins that enable creating the parallax animation or effect in your web pages. In this tutorial, I am going to show you a jQuery based plug-in, Parallaxer.
The Parallaxer is quite simple to setup, which is only about 7KB size file. Just place the plug-in file above the </body> tag after the jQuery main library and initialize the plug-in.
See following demos for creating parallax effect by using this plug-in.
A simple example of using the Parallaxer
In this example, a parallax effect is created by using three images. No other content is used in this demo. Just scroll down to see the effect i.e. relatively slow movement of images. See the demo online by clicking the links below:
See online demo and code
This is how it is done. First of all, the CSS file of the plug-in is included in the <head> section of demo page.
<link rel=”stylesheet” type=”text/css” href=”css/jquery.parallaxer.css”>
A class of CSS is created in the <style> section to deal with the content in between images.
In the <body> section, the <div> elements are created for referring images that you intend to use for parallax animation. Each <div> tag references the .parallaxer class. For example:
<div class="content"></div> <div class="parallaxer"> <img src="images/chocho-1.png"> </div>
Just above the body closing tag </body>, the jQuery and jquery.parallaxer.js are called:
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.parallaxer.js”></script>
Finally, in the <script> section, the code is written for initiating the parallaxer:
<script type="text/javascript">
(function ($) {
"use strict";
$(function () {
$(".parallaxer").parallaxer();
});
}(jQuery));
</script>
Note: The complete source code of demo is at the bottom of the example page.
A demo with the text content
You may add content like text information in between different images used in parallax. If you look at it closely while scrolling down, the text will look move faster than images in the background.
See a demo online, where I simply added some text in above demo by using another div just above each image’s div element:
See online demo and code
You can see the complete code in the demo page.
Adding a web form in parallax demo
Not only you may add simple text information but other components like a carousel, sliders, web forms, picture galleries, etc. in between the parallax elements.
For the demo, I have a created a simple form with a few fields and used after the second image.
See online demo and code
Simply place the code inside the <div> with .content or some other custom classes and you are done!