Creating Great Parallax Scrolling with Scrollorama

Modern day websites are designed to provide different types of user-interaction. While jQuery effects and CSS3 continue to be used widely, scrolling is one of the crucial features behind their success. Recently, I used Scrollorama for one of our clients’ website. Created by John Polacek, it is a jQuery based plug in. Let me guide you on how you can build cool scrolling events using this plugin.

Let’s Get Started

To teach you how to use this plugin in a coding project, i am starting from the scratch,

Adding Scrollorama Files

Usually the demo files from the download includes JS scripts and additional styles to make sure that the example appears fancy. So I am not going to include all those non essential files (so you don’t get confused in the very beginning) and that’s why below example has only the important files. The following codes show only the important files.

<!DOCTYPE html> <html lang="en"> <head> <title>scrollorama</title> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/jquery.scrollorama.js"></script> </head> <body> </body> </html>

As you can see, both Scrollorama JS and Jquery files are required for this plugin. You will need to add CSS codes on your own according to the required effect. Now let’s begin creating some scrolling elements.

Plugin initialization

As shown below, Plugin can be initialized on document load with the help of Scrollorama function. Look for the code below.

<script> $(document).ready(function() { var scrollorama = $.scrollorama({ blocks:'.scrollblock' }); }); </script>

Blocks are the variables that needs to be passed into this Scrollorama function. In this example, .Scrollblock has been passed as the value. Due to this, every element that includes CSS class scrollback will get initialized in order to use scrolling effects.

Working of Element Structure

If you have to use this plugin, you will have to create similar kinds of blocks. All the effects offered by Scrollorama plugin will be available for use by Every HTML element present inside the blocks. All you have to do is make CSS styles for the blocks according to your requirements. Following code presents a sample style code:

.scrollblock { margin: 0; width: 100%; height: 600px; }

To make sure that the blocks match the layout, you can also give the height, width of the blocks. Rest all of the styles can be omitted because they are optional. So let’s get started with creating a simple scroll effect with the help of this plugin.

Simple Example

Now that we have created all the files required for plugin initialization. We must move to creating blocks. While you can create each block with different styling and elements, I am creating the same styles to keep this example simple.

<div class="scrollblock" id="intro1"> <h1 id="title1">Block 1</h1> </div> <div class="scrollblock" id="intro2"> <h1 id="title2">Block 2</h1> </div> <div class="scrollblock" id="intro3"> <h1 id="title3">Block 3</h1> </div>

As you can see, I have build 3 blocks with similar kind of element structure.

If you notice, every block contains the class, ID and scrollback for the element. When we are talking about making element effects, ID is very important. Let’s move to creating some effects on the 3 blocks we just made above.

scrollorama.animate('#title1',{ duration: 300, property:'zoom', end: 8 }); scrollorama.animate('#title2',{ duration: 600, property:'rotate', start:90,end:270 }); scrollorama.animate('#title3',{ duration: 600, property:'left', start:-800,end: 0 });

Explaining the Code

With the help of a method called animate, Scrollorama produces the effect. As you can see, I have created 3 different effects on the 3 blocks. ID of the element will act as the initial parameter. And we are talking about any element inside of the box. In the example, I have allotted animations to h1 tags.

Now moving on to defining values for the second parameter. Following are some of the acceptable parameter alongside with their description

Duration- Number of scrolling pixels during which animation lasts.
Delay- number of scrolling pixels before the start of animation [animation starts when top of the scroll back reaches bottom of browser window]
property- CSS property in animation
Start- CSS property’s value at the beginning of animation.
End- CSS property’s value at the animation ending.
Pin- In case you want the scroll block to be pinned during the time when animations are running, this must be set to true.
Easing- All you have to do is use the same equation you have been using till now- BOunce baby, Bounce

Now you shall see three different kind of effects on 3 blocks. I will come the explanation of how to properly use these cool effects, later on.

Introduction to Scrollorama Effects

Use of Scrollorama animation function will allow you to use maximum of the CSS property that includes numeric values. Let’s begin with some of the most commonly used CSS properties.

Zooming

Zoom property will allow you the feature of creating both zoom-out or zoom-in effects.

scrollorama.animate('#title',{ duration: 300, property:'zoom', end: 8 });

In the code given above, animation will begin from the default size and end at 8 times the original size lasting only 300 scrolling pixels.

You can also choose delay property if you do not want the effects to start immediately. In the code above, the delay property can not be used. the property will continue to delay until the scroll reaches the predefined number of pixels.

Rotating

To rotate the element at any given angle, you may choose to choose rotate property.

scrollorama.animate('#title',{ duration: 300, property:’ rotate’, start:90,end: 270 });

In the code above, the element will continue to rotate for around 300px and will rotate 270 degree towards the end of war.

Moving Text

With the help of top, right, left & bottom CSS property, you can even move the text within the screen.

scrollorama.animate('#title',{ duration: 300, property:'left’, start:-10000,end: 0 });

As you can see, the code element will begin at -1400 pc and will continue to shift from lef to right until it reaches 0 px.

Changing Height

You can also alter the element’s height with the help of CSS height attribute.

scrollorama.animate('#title',{ duration: 300, property:’height’, start: ‘100’,end: ‘500’ });

Any CSS property that includes a numeric value can be used to create effects. While I have shown some of the most common effects, It is your responsibility to try other CSS properties as well in order to make some cool scrolling effects.

Scrollorama in Action

Till now, we have learned all the basic uses that Scrollorama plugin offers. Now let’s move on to make something of practical use.

Do you have a blog where you post articles? Have you written any article to blog that is famous for creating excellent posts?

Whatever the case may be, you need to create traffic for the website and engage the uses to become your loyal readers by either sharing or subscribing the article. That’s exactly where CTA, blog layout and interactions come into play. Let us see how we can incorporate Scrollorama effects to achieve our goal of blog traffic.

Things to do:

Creating a sample blog page
Adding text effects on blog post titles.
Creating attention grabbing social sharing bar
Encouraging user to read more
Making rotating data circle.

Let us begin with the blog page first. Now, you have to assume that this is home page where you provide list of your posts. Now we will consider each block as a single potential blog post. Let;s begin creating 6 blocks on our home page.

<div class="scrollblock" id="intro1"> <div class="clearfix"> <div class="date-img"> <img src="images/cate-circle.png" id="date1" class='circle' /> <span class="date" >Jan<span >12</span></span> <h1 id="title1"><a href="#">John Doe (1883–1947)</a></h1> <span class="ln">From Wikipedia, the free encyclopedia</span> <span class="ln comments">no responses</span> </div> </div> <div id="content1"></div> </div> <div class="scrollblock" id="intro2"> <div class="clearfix"> <div class="date-img"> <img src="images/cate-circle.png" id="date2" class='circle' /> <span class="date" >Jan<span >12</span></span> <h1 id="title2"><a href="#">John Doe (1883–1947)</a></h1> <span class="ln">From Wikipedia, the free encyclopedia</span> <span class="ln comments">no responses</span> </div> </div> <div id="content2"></div> </div> <div class="scrollblock" id="intro3"> <div class="clearfix"> <div class="date-img"> <img src="images/cate-circle.png" id="date3" class='circle' /> <span class="date" >Jan<span >12</span></span> <h1 id="title3"><a href="#">John Doe (1883–1947)</a></h1> <span class="ln">From Wikipedia, the free encyclopedia</span> <span class="ln comments">no responses</span> </div> </div> <div id="content3"></div> </div>

The above code shows only 3 blog posts. It is understood that rest of them will also contain the same structure.

Now, as we are ready with the titles and contents. We need to add social sharing bar and read more button on our home page.

Now that we have added block elements to our page. Let us dive into making animations.

$(document).ready(function() { for(var i=1;i<7;i++){ var title = "#title"+i; var social = "#social"+i; var readmore = "#readmore"+i; var postDate = "#date"+i; switch(i){ case 1: scrollorama.animate(title ,{ duration: 600, property:'zoom', end:2}); scrollorama.animate(social ,{ duration: 300, property:'left', start:-650,end: 0 }); scrollorama.animate(readmore ,{ duration: 800, property:'zoom', end: 2 }); scrollorama.animate(postDate ,{ duration: 800, property:'rotate', start:180,end:360}); break; case 6: scrollorama.animate(title ,{ duration: 600, property:'zoom', end:2}); scrollorama.animate(social ,{ duration: 700, property:'left', start:-650,end: 0 }); scrollorama.animate(readmore ,{ duration: 800, property:'zoom', end: 2 }); scrollorama.animate(postDate ,{ duration: 800, property:'rotate', start:180,end:360}); break; default: scrollorama.animate(title ,{ duration: 600, property:'zoom', end:2}); scrollorama.animate(social ,{ duration: 700, property:'left', start:-650,end: 0 }); scrollorama.animate(readmore ,{ duration: 800, property:'zoom', end: 2 }); scrollorama.animate(postDate ,{ duration: 800, property:'rotate', start:180,end:360}); break; } } });

As all the elements are of similar kind, the effect has been incorporated with the help of for loop. As there is not much of the scrolling duration, only the first element will be displayed. I have used custom animation for social sharing bar with the increased speed to take care of this problem. Similarly you can also assign the custom animation even to the last block. Don’t hesitate to change any of this value in order to meet your requirement.

Now all you have to do is use this code, create a page and incorporate this demo file in a project folder. Then open it in browser.

Once you begin scrolling, you will see headline moving from the left side to the right. Then, a social bar will appear to encourage users to share the article. A Read more button will also be present with zoom option to notify users that clicking on this button will lead you to full article.

Unfortunately, Most of the Scrollorama effect are not supported by Internet Explorer. So make sure that you consider this fact in using this plugin in real-time projects.

It is very important to understand that I do not recommend you to create a page like this. What I wanted to tell was that it is very important to grab eyeballs else the users will come, browse and leave.
Just make sure that you select the right combination of effects without compromising on page’s overloading speed. Catch user attention and make sure that your online presence is felt. Best of Luck.