Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
25th November 2013

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

Create simple parallax scrolling with Skrollr

Grab the source

Start by downloading the latest zipped package of Skrollr from github.com/Prinzhorn/skrollr 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/.

Create simple parallax scrolling with Skrollr

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; 
004 
005 height: 110%;
006 
007 }
008 HTML:
009
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 50north5th.com 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 bit.ly/IOykZD.

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!

 

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.