By
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/.
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!
