Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Create simple parallax scrolling with Skrollr

Blenderbox senior developer Caleb Brown explains how to emulate the parallax scrolling effects found on the 50 North 5th site

Grab the source

Start by downloading the latest zipped package of Skrollr from and unzip the files. Identify the ‘skrollr.js’ file from the /src directory and move it to the root or JavaScript directory of your project, which in our example is /javascripts/libs/.


Configure your frontend

Add a <div> element to your HTML page and add the data attributes to configure the parallax effect, as shown below. What this means is, when scrolling from 0px to 500px we want the element’s background-position to go from 50% 0px to 50% -700px;. The CSS properties can be any numeric value in CSS, so height, width, rotation, and so on. You will need to ensure however that your page is scrollable, either naturally by populating with other elements or with the height forced over 100% by the body, HTML CSS class.

001 CSS:
 002 body, html {
 003 background: #333; 
 005 height: 110%;
 007 }
 008 HTML:
 010 < div class="”bg”" data-0="”background-" data-500="”background-position:50%">< /div>

Style your background div

Within the CSS stylesheet, we must assign our div element a .bg class. Here we’ll set the background image to a chosen JPEG, along with the dimension properties. Our example image height is 766px so we set the container purposefully shallow, plus our image width is 1024px so you only need set the width if you wish to reduce. Below those we’ll add a subtle CSS3 transition, listed here for cross-browser compatibility.

001 .bg {
 002 background:url(“background.jpg”) no- repeat 50% 0; /* UPDATE WITH YOUR OWN IMAGE */
 003 height: 400px;
 004 width: 1024px;
 005 -moz-transition: all 0.3s ease- out; 
 006 -ms-transition: all 0.3s ease- out;
 007 -o-transition: all 0.3s ease- out;
 008 -webkit-transition: all 0.3s ease- out;
 009 transition: all 0.3s ease-out;
 010 }

Include the JavaScript files

Create a new JavaScript file called ‘application.js’ and place within your JS directory, in our example ‘/javascripts/app/’. Include this file along with skrollr.js before the closing body tag of your HTML page. We recommend this method to minimise JavaScript for better coding practice.

001< script type="text/javascript" src="”http://ajax.">< /script>
 002< script type="text/javascript" src="”/javascripts/libs/">< /script>
 003< script type="text/javascript" src="”/javascripts/app/">< /script>

Initialise the plug-in

Inside our application.js file, call the skrollr.init() function on document load, passing in the options as desired. On for example, we set forceHeight and smoothScrolling to false, with the latter instead handled by our CSS transition. Skrollr is pretty powerful, so be sure to check out the various demo examples and documentation by visiting

001 (function($){
 002 skrollr.init({
 003 forceHeight: false,
 004 smoothScrolling: false // we set this to false since our CSS is handling the transition
 005 }); 
 006 } (jQuery));

Background panning

Save all the project files and preview the HTML page in your browser, scrolling vertically to observe the final effect. You should notice the background image smoothly panning up within the element as the page scrolls upwards. Go ahead and experiment with the various <div> parameters to achieve custom results!