Creating a Parallax Scrolling Webpage Using Jarallax.js

October 24, 2013 in Tutorials by Rahul Chowdhury

We come across a number of websites daily whilst browsing, but what makes a website grab our attention at first sight is a wonderful design and its interactivity. There is a category of websites which you might have noticed, that present wonderful scrolling effects. These types of website are called Parallax Scrolling Websites.

In this tutorial we will be creating a single page based on this Parallax Scrolling effect using a JavaScript library called Jarallax.js. Before jumping into the steps of creating a Parallax Scrolling webpage, why don’t we have a look at what Parallax Scrolling really is?

Creating a Parallax Scrolling Webpage Using Jarallax.js

[tut demo=”https://onextrapixel.com/examples/parallax-scrolling-website-with-jaralla/” download=”https://onextrapixel.com/examples/parallax-scrolling-website-with-jaralla/parallax-scrolling-website-with-jaralla.zip”]

How to Create a Parallax Scrolling Webpage

What is Parallax Scrolling?

Parallax Scrolling is a technique in which the background element or image moves slowly compared to the elements or images on top of it, when the page is scrolled.

This technique has been used for years, from video games to mobile operating systems like Android, and now we are able to exploit this feature in creating wonderful sites.

Collecting Resources

Before we can start working on creating a Parallax Scrolling webpage, we need to collect some resources using which we will be creating the page. Here’s a list of all the things that we will be needing:

Background image (for this tutorial I will be using a fantasy wallpaper downloaded from wallbase.cc representing a space fight scene)
Scene elements (here I will be using two planets for the scene which will move up when scrolling, collect from jarallax.com, you can use any element that goes well with your site theme.)
Jarallax library (you can downloaded the JavaScript library from jarallax.com)
jQuery library (you can download the latest version of jQuery from jquery.com)

Starting the Development

Okay, it’s time to get our hands dirty and start developing our webpage. The first task is to analyse the scene and create a blueprint of the events that will take place when the user scrolls the page.

In this tutorial we will be creating a scene where, when the users scrolls the page, the two planets will scroll up slowly along with the background image, and several messages will appear on the left side of the page at different intervals.

So now that we have a theme for our webpage, let’s start preparing the CSS for the page.

CSS

Our CSS for this tutorial, will consist of styling for the webpage body, a few paragraphs and the floating elements on the top of the page, which in our case are the two planets.

First we will be applying some basic style for the body of the webpage, which will look like this:

body {
font-family: arial, sans-serif, verdana;
height:5000px;
color:white;
margin:0;
padding:0;
}

The height of the body is intentionally kept very high, so that we can get enough space for our scrolling effect to work. Here the height is taken to be 5000px, which will vary according to your needs. If you are creating a longer webpage with more effects than this one, then you should increase the height to your desired value, or shorten it if your webpage will be shorter.

Since we don’t want our white spaces to appear on the sides of our background image, the values of margin and padding are set to 0.

Now that we have set the style for the body of our webpage, it’s time to move on to the paragraphs:

p{
font-size: 72px;
width: 30%;
position: absolute;
left: 10%;
top: 25%;
padding: 10px 20px;
font-weight: bold;
font-family: Verdana;
text-shadow: 0 1px 1px #000;
}

You can apply custom styling for your paragraphs according to your website design. For this tutorial I have applied the above styling for the paragraphs.

After setting the styles for your paragraphs it’s time to create a window through which the visitor will see your site and its effects. It’s basically the content area of your page and looks something like this:

.content {
position:fixed;
width:100%;
height:100%;
}

Finally we will apply the styles for our main elements such as the scene background, a top loading bar which indicates the progress of scrolling and in the case of our theme, the progress of the space battle, the floating or scrolling elements which are the planets in our case, and finally an end screen which will appear at the end of the page:

/*The loading bar*/
.bmeter {
position: fixed;
top: 0px;
left: 0px;
width: 0%;
height: 15px;
background-color: #fff;
opacity: 0.5;
z-index: 10;
}
/*The end screen*/
.theend {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
padding-top: 45%;
padding-left: 60%;
font-size: 72px;
font-weight: bold;
font-family: Verdana;
text-shadow: 0 1px 1px #000;
opacity: 0;
z-index: 13;
}
.behind, .planet1, .planet2{
display:block;
position:absolute;
}

.behind{
width:100%;
height:110%;
background:url(images/back.jpg) top center no-repeat;
top:0%;
left:0%;
position:absolute;
z-index:-1;
}

.planet1{
width:356px;
height:344px;
background:url(images/bigmoon.png) no-repeat;
left:65%;
top:90%;
}

.planet2{
background:url(images/smallmoon.png) no-repeat;
width:204px;
height:183px;
left:50%;
top:70%;
}
@media only screen and (max-width: 1000px) {
p{
font-size: 48px;
}
.planet2{
left: 40%;
background-size: 80%;
}
.planet1 {
background-size: 80%;
}
.theend {
font-size: 48px;
}
}

Here the class .behind contains the background image for the scene, and its height is set to 110% so that we have enough extra parts of the image left which will be shown to the user when the page is scrolled.

For optimal effect, it’s recommended that you choose a large resolution picture for the background probably above 1920 x 1080 pixels, so that we have enough portion of the picture which will remain invisible when the page is loaded but will slowly appear when the page is scrolled.

For the other elements we have created two separate classes .planet1 and .planet2 for the big and the small planets respectively and positioned then on the desired area of the screen. This styling will be applied to these section only when the page is loaded, and with scrolling their positions will change which we will control through the Jarallax library.

I have also used @media queries in the CSS so as to make the page responsive, as when the width of the screen will be less than 1000px the font size along with the planet sizes will be decreased and the smaller planet will be shifted towards the left to render the scene properly and avoid overlapping.

JavaScript

So now that we have completed our CSS, we need to move to creating our animations using JavaScript with help of Jarallax.

First let’s create a file called animations.js, where we will be adding all the animations that will take place on scrolling the page. We will start our animations file with this code:

init = function(){
      jarallax = new Jarallax();

This code will create a new function called init() and also create an object of the Jarallax class. To make it simple this is a function which will be called on loading the page, and will perform all the animations when scrolling. So let’s start filling in our animations:

jarallax.setDefault('#p1, #p2, #p3', {opacity:'0'});
jarallax.setDefault('#p1, #p2, #p3', {marginLeft:'-1000px'});

Using this code we will be setting the default CSS for our paragraphs, making them invisible at first. Then we will be adding the animations for our background image and the floating elements which will look something like this:

jarallax.addAnimation('.planet2',[{progress: "0%", top:"70%"}, {progress: "100%", top: "40%"}]);
jarallax.addAnimation('.planet1',[{progress: "0%", top:"90%"}, {progress: "100%", top: "-5%"}]);
jarallax.addAnimation('.behind',[{progress: "0%", top:"0%"}, {progress: "100%", top: "-10%"}]);
jarallax.addAnimation('.bmeter',[{progress: "0%", width:"0%"}, {progress: "100%", width: "100%"}]);
 jarallax.addAnimation('.theend',[{progress: "95%", opacity:"0"}, {progress: "100%", opacity:"0.85"}]);
      
 jarallax.addAnimation('#p1',[{progress: "15%", opacity:"0"}, {progress: "20%", opacity:"1"}]);
 jarallax.addAnimation('#p1',[{progress: "20%", opacity:"1"}, {progress: "30%"}]);
 jarallax.addAnimation('#p1',[{progress: "30%", opacity:"1"}, {progress: "40%", opacity:"0"}]);
 jarallax.addAnimation('#p1',[{progress: "15%", marginLeft:"0"}, {progress: "40%"}]);
      
 jarallax.addAnimation('#p2',[{progress: "45%", opacity: "0"}, {progress: "50%", opacity: "1"}]);
 jarallax.addAnimation('#p2',[{progress: "50%", opacity: "1"}, {progress: "60%"}]);
 jarallax.addAnimation('#p2',[{progress: "60%", opacity:"1"}, {progress: "70%", opacity:"0"}]);     
 jarallax.addAnimation('#p2',[{progress: "45%", marginLeft:"0"}, {progress: "70%"}]);
      
 jarallax.addAnimation('#p3',[{progress: "75%", opacity:"0"}, {progress: "80%", opacity:"1"}]);
 jarallax.addAnimation('#p3',[{progress: "80%", opacity:"1"}, {progress: "100%"}]);
 jarallax.addAnimation('#p3',[{progress: "75%", marginLeft:"0"}, {progress: "100%"}]);
    }

In Jarallax, every animation is added using the function addAnimation(), and since our object name here is “jarallax”, we will add each animation using jarallax.addAnimation(). To understand exactly how we can add an animation for our elements using Jarallax, let’s take the first line and examine it:

jarallax.addAnimation('.planet2',[{progress: "0%", top:"70%"}, {progress: "100%", top: "40%"}]);

In this line we are calling the addAnimation() with some parameters such as .planet2, and progress and CSS stylings. Here the .planet2 represents the small planet which we have created in the CSS section.

Now we need to choose a starting point of our animation and what will be the position or styling of the element at that point. For that we need to write {progress: "0%", top:"70%"}, and this means that at the starting point the element will be at a position 70% from the top of the screen.

Similarly we need to create an ending point of our animation, and we can do that by writing {progress: "100%", top: "40%"}, which states that at the ending point the element will be at a position 40% from the top of the screen.

We can also split the screen into multiple starting and ending points, which is applied by the paragraphs #p1, #p2 and #p3.

So, in this way we can add separate animations for our elements which will occur when scrolling the page.

HTML

After completing creating the animations and the styling, it’s time to put them together and create the webpage, using HTML. So, here is the resulting HTML code for rendering the page:

<!DOCTYPE html>
<html>
  <head>
    <title>Parallax Scrolling Website with Jarallax.js</title>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="js/jquery.js"></script>
    <script src="js/animations.js"></script>
    <script src="js/jarallax.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body onload="init()">
    <div class="content">
      <span class="bmeter"></span>
      <span class="behind"></span>
      <span class="planet1"></span>
      <span class="planet2"></span>
      <span class="theend">THE END</span>
      
      <p id="p1">
        Hello!
      </p>
      <p id="p2">
        Welcome to the world of 2050.
      </p>
      <p id="p3">
        Get ready for the ultimate battle.
      </p>
    </div>
  </body>
</html>

This is a simple HTML page, but there are some things which are needed to be taken care of, and they are:

The stylesheet and all necessary JavaScript files such as animations.js, jarallax.js and jquery.js should be imported within the <head> and </head> tags.
The animations function that we have created in the JavaScript section, should be called on the page load by writing <body onload="init()"> instead of <body>.
The required classes and id with your page elements like the planets and the paragraphs, like <p id="p1">, etc, should be added.
Since we have made the page responsive, the line <!DOCTYPE html> should be added at the beginning of the HTML document, and <meta name=”viewport” content=”width=device-width, initial-scale=1.0”> should be added within the <head> and </head> tags.

Final Thoughts

That’s it guys, we have successfully created a responsive Parallax Scrolling webpage using Jarallax.js. You can view the final demo and download the whole package from the link below.

Now, it’s time for you to create an awesome site with Parallax Scrolling effect and let us know about it, we will be happy to have a look at your creation.