Parallax scrolling with skrollr.js – part 1

[sociallocker id=”3578″]  Part 2 with the code repo Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love). The skrollr.js library lets you add scrolling animations (of which parallax is one)  to your webpage (Android and IOS included) by targeting HTML elements via data attributes.  No JavaScript or Jquery is needed. For example you can make a div fade in,  fade out and change the positioning of elements based on the current height of the viewport as you scroll up or down. Setting up skrollr.js To include skrollr. js  in your project:

1.  Download the skrollr.js min file from their Github  page
2.  Unzip the file and add it to your project directory for example the ‘js’ subfolder inside the main project directory
3. Include skrollr.js in your HTML doc just before the closing tag

2 important concepts:

1. Relative and Absolute positioning
2. Data Attributes

1. Absolute positioning:  Key frames are described as absolute values depending on how much the HTML doc has been scrolled up or down
2. Relative positioning: Key frames are described relative to the HTML doc i.e . they are defined according to the position of any element relative to the viewport

2.Data attributes are key to skrollr.js.  HTML5 data attributes are assigned to elements in your markup. For example you can apply a data attribute to a div and the tell skrollr to change it’s opacity as it moves 100px above or below the viewport (essentially your screen). Below is a cheatsheet from Petr Tichy. The syntax for  placing a data attribute with absolute positioning is:  data-offset (any integer) – anchor (Start or End) = “Css property you would like to change: Value” For example:

1. data-0: When the scroll top is at position 0 (the top most part of your screen)
2.  data-100-start: When the scroll top is 100px below the top most part of the viewport
3. data–100- end: When the scroll top is – 100px above the end of the viewport

The syntax for placing a data-attribute with relative positioning is:  data-offset-viewport-anchor(top,center or bottom)-element-anchor( top, center or bottom) For example:

1.  data-0-top-top: When the element’s top most part is aligned with the top of the viewport
2. data-100-top-top: When the element’s top most part is aligned 100px above the top of the view port
3. data-top-bottom: When the bottom of the element is at the top of the viewport

skrollr.js cheatsheet by Petr Tichy @www.ihatetomatoes.net