Creating Cool Scrolly Stuff with Scrollorama
Modern web sites are designed to provide various types of interactions with users. CSS3 and jQuery effects are used in most of those situations. Scrolling is one of the major effect used for these interactions. So I am going to talk about a plugin called scrollorama, which can be used to create cool scrolling events.
Scrollorama is a jQuery plugin created on github by John Polacek.
You can download it Here
Getting started with Scrollorama
I am going to create the scrolling effects from scratch to let you learn how to include it in a new project. You can use the downloaded example if you wish. So let’s start configuring.
Including Scrollorama Files
Demo file in the download contains additional styles and Js scripts for make the example look fancy. So I am going to provide only the necessary files so that you know how to use the plugin from scratch. Code below shows you the necessary 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>
Jquery and Scrollorama js files are the only files needed for this plugin. You will have to add CSS codes according to your effects, once we create the scrolling elements. Let’s move on to creating scrolling elements.
Initializing plugin
We can initialize the plugin on document load using the scrollorama function as shown in the code below.
<script>
$(document).ready(function() {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
});
</script>
You have to pass variable called blocks into this function. Here I have passed .scrollblock as the value. So all the elements with CSS class scrollblock, will be initialized to use scrolling effects.
How element structure works
You have to create similar type of elements called blocks in order to work with this plugin. Every HTML element inside the block will be ready to use the effects provided by scrollorama plug-in. You have to create CSS styles for the blocks according to your preference. I have provided the sample styles used for the demo, in the following code.
.scrollblock {
margin: 0;
width: 100%;
height: 600px;
}
You can provide the width, height of blocks to match your layout. All the other styles defined in the demo files are optional and can be omitted. So let’s create a simple scroll effects using the plugin.
Simple example
Now we have included all the files and initialized the plugin. Its time now for creating blocks. I am going to create blocks of similar styles to make it simple. You can create each block with different elements and styles.
Here I have created 3 blocks with same type of element structure.
<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 every block has the class, scrollblock and ID for the element. ID is important when we make effects on elements. Let’s create some cool effects on the 3 blocks defined 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 });
Code Explanation
Scrollorama has a method called animate to generate the effects. That’s where the magic happens. I have assigned different effects for the 3 blocks I have.
Initial parameter would be the ID of the element you want to use. This can be any element inside the blocks. I have assigned the animations to h1 tags in above example
Then you can define list of values for the second parameter. I have given the acceptable parameters list and their descriptions as listed in scrollorama site.
- duration number of pixels of scrolling the animation lasts
- delay number of pixels of scrolling before the animation starts(animation is set to begin when the top of the scroll block is at the bottom of browser window)
- property CSS property being animated (must be numeric)
- start value of the CSS property at the start of the animation (if unassigned, will be the element’s current property value)
- end value of the CSS property at the end of the animation (if unassigned, will be the element’s current property value)
- pin set to true if you want the scroll block to be pinned during its animations (note: block will be pinned for all its element’s animations)
- easing ‘bounce baby, bounce.’ use the same easing equations you’re used to. (if unassigned, will be a linear transition)
Now open the example code in the browser and keep scrolling. You will see different type of effects on 3 blocks. I’ll explain how to use those parameters properly to make some cool effects on scroll.
Introduction to Scrollorama Effects
You will be able to use most of the CSS properties which has numeric values, using the Scrollorama animation function. Let’s get started with the commonly used CSS properties.
Zooming
You can create zoom-in or zoom-out effect on elements using the zoom property.
scrollorama.animate('#title',{ duration: 300, property:'zoom', end: 8 });
In above code animation will last for 300px of scrolling and it will start at default size and finish at 8 times larger than the original size. You can use minus values for the end parameter to make the zoom-out effect.
I have not added delay property. If you don’t want to start the effects immediately, use the delay property. It will delay the effect until the scroll reaches the number of pixels you have defined.
Rotating
You can use rotate property to rotate the elements in a given angle.
scrollorama.animate('#title',{ duration: 300, property:’ rotate’, start:90,end: 270 });
Above element will rotate for 300px and it will initially be at 90 degrees before starting the animation and will rotate to 270 degrees at the end.
Moving Text
You can move the text within the screen by using top, left, right, bottom CSS properties.
scrollorama.animate('#title',{ duration: 300, property:'left’, start:-10000,end: 0 });
In the above code element will initially be -1400px and will move from left to right when the animation begins and stops at 0px.
Changing Height
You can change the height of element on animation using the CSS height attribute.
scrollorama.animate('#title',{ duration: 300, property:’height’, start: ‘100’,end: ‘500’ });
Any CSS property which has a numeric value can be used inside the animation function to create effects. I have given commonly used effects and now it’s your job to try other CSS properties and make cool scrolling effects.
Scrollorama in Action
We have completed learning the basic usages of Scrollorama plugin. Now it’s time for us to create something practical.
Do you have a blog where you write about the topics you love? Have you written articles to popular blogs which creates amazing posts?
In either case we need to generate traffic to the website and get the users to become loyal readers by subscribing or sharing the content. Blog layout, Call to actions and interactions plays a vital role in doing so. So let’s see how we can use Scrollorama effects in a blog post to achieve our goal.
What are we going to do:
- We are going to create a sample blog page.
- Add some Text effects on blog post titles
- Creating eye catching social sharing bar
- Encourage users to read more
- Create rotating data circle
Let’s create the blog page first. Assume this is the home page where you provide summery of your posts as a list. I am going to consider each block as a single blog post. So let’s create 6 blog posts on our 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="#">Johnny Evers (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="#">Johnny Evers (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="#">Johnny Evers (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>
Only 3 blocks are shown i the code above since other blocks have the same structure.
We have the titles and content ready. Next we will add the Read More button and Social sharing bar for our 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="#">Johnny Evers (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>
<p id='social1' class='social'>
<img src='images/tw.png' />
<img src='images/fb.png' />
<img src='images/my.png' />
<img src='images/te.png' />
</p>
<input id="readmore1" class='readmore' value='Read More' />
</div>
Now we have done with adding block elements to our page. Let’s move into creating 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;
}
}
});
You can see that I have attached the effect using a for loop since all the block elements are similar. But first block will be displayed in default view. So there is not much scrolling duration to apply the effects. Hence I have used custom animation for social bar on the first block and increased its speed. Likewise you will have to specify custom animation to your last block as well. Feel free to change these values to suite your applications.
Now just use the code and create the page or use demo file in the project folder and open in browser.
Once you start scrolling you will be able to see that headline appears from left to right. Then on the end of the summery social bar appears from left to right suggesting that users should start sharing. Then the read more button is zoomed to notify users that it is just the beginning and clicking the button will direct you to more quality content.
Unfortunately Internet Explorer does not support most of the effects of Scrollorama. So be sure to consider it when using in real projects.
This is just an example. I don’t suggest you to create the page like this. What I wanted to tell was to catch the user’s eye by providing interactive content. Otherwise users will read the post and just go away.
Make sure to select the right effects for right components without overloading the page with too many interactions. Grab the attention of users and increase your website presence online. Good Luck.
Demo and Download
Just checked the demo and its really awesome! Will try to implement scrollorama on my blog. Thank you.
Thanks for your comment.
Demo doesn’t do anything.
It will not work properly on Internet Explorer. You should be able to see Zooming effect of Title and Read More button. Also Social Sharing bar appears from left to the center of the box.
I am using the latest Chrome on Mac. I can see the hover effect and social slide in in the first box. However, the Read More button does not zoom and neither does the title.
Also, I am wondering why even use javascript at all if this won’t work in IE anyway? Why not just use HTML5/CSS3 to animate?
I tested on Chrome with Windows and it worked without any issues. I dont have the MAc environment to test.
Even though this is a javascript plugin, css styles are used to generate the effects. CSS used for zooming does not work in IE.
really nice tutorial, seems to be the only one on the web at the moment and is allot more informative than their documentation. There is an updated version now available SupperScrollorama. Apparently it allows for horizontal scrolling effects among other things. Would love to see a tut on the new version :-p x
Hello Rakhitha,
Great tutorial!
I used scrollorama for the following website: http://www.martin-ardouin.de/p4f/banner.html
My problem is that it only works fine on a resolotion of 1280px width. is there any way to make it work on all resolutions?
sorry for my bad english ;)
Thanks for this great tutorial. It was noticeably missing from the official website. Cool.
Hi!
Please can u do a tutorial like this with superscrollorama? (There are many changes now)
Thanks in advance! :)
I am trying to use scrollaroma in a wordpress site but i don’t have a clue on where to start. Am using a theme called minimable.fedeweb.net/demo/
Please advise
Thank you very much for this tutorial. I love websites with this scrolling effect
where do you paste this/
scrollorama.animate(‘#title1′,{ duration: 300, property:’zoom’, end: 8 });
2
scrollorama.animate(‘#title2′,{ duration: 600, property:’rotate’, start:90,end:270 });
3
scrollorama.animate(‘#title3′,{ duration: 600, property:’left’, start:-800,end: 0 });
in html file, or .js file or css file?
It is not working for me