- Download the skrollr.js min file from their Github page
- Unzip the file and add it to your project directory for example the ‘js’ subfolder inside the main project directory
- Include skrollr.js in your HTML doc just before the closing tag
2 important concepts:
- Relative and Absolute positioning
- Data Attributes
- Absolute positioning: Key frames are described as absolute values depending on how much the HTML doc has been scrolled up or down
- 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:
- data-0: When the scroll top is at position 0 (the top most part of your screen)
- data-100-start: When the scroll top is 100px below the top most part of the viewport
- 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:
- data-0-top-top: When the element’s top most part is aligned with the top of the viewport
- data-100-top-top: When the element’s top most part is aligned 100px above the top of the view port
- 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