jQuery Plugin For Creating Multi-purpose Scrolling Effects - Scroolly

Scrolly is a powerful jQuery plugin for creating cool scrolling effects as you scroll down the page, including parallax scrolling, scroll to top, reading progress bar, sticky headlines, accordion, and much more.

How to use it:

1. Load the jQuery scrolly plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery.scrolly.js"></script>

2. Basic usage.

$.scrolly()

3. Create scrolling effects in the javascript.

[
{
from: 0, // top border of the rule region
to: 'finish', // bottom border of the rule region
  // if ommited then set to 'from' of the following rule
  // if there is no following rule set to 'bottom'
minWith: 0, // min viewport width for the rule to apply
maxWidth: 'infinity', // max viewport width for the rule to apply
direction: 0, // 0 - ignored, >0 - forward, <0 - backward
alias: 'top', // region alias
css: null,//{'display': 'none'}, // css to apply when TSB enters rule region
cssFrom: {'border': '0px solid #000000'},
cssTo: {'border': '10px solid #eeeeee'},
addClass: null,   // $.addClass() param value to add classes when TSB enters rule region
removeClass: null,// $.removeClass() param value to remove classes when TSB enters rule region
onCheckIn: function(element){ // callback on TSB enters rule region
element
.hide('fade', 100);
searchInputMain.val(searchInputTop.val());
},
onCheckOut: function(element){} // callback on TSB(top screen border) leaves rule region
onTopIn: function(element){}  // callback on TSB enters rule region from the top border
onTopOut: function(element){}  // callback on TSB leaves rule region from the top border
onBottomIn: function(element){}  // callback on TSB enters rule region from the bottom border
onBottomOut: function(element){}  // callback on TSB leaves rule region from the bottom border
onScroll: function(element, offset, length){}  // callback on scroll event while TSB is in the rule region
  // offset - is the offset (px) of the TSB from the rule region top border
  // length - is the rule region size (px)
onDirectionChanged: function(element, direction){}
},
{
from: searchFormMain.offset().top,
alias: 'searchform',
css: null,//{'display': 'block'},
addClass: null,
removeClass: null,
onCheckIn: function(element){
element.show('fade', 300);
searchInputTop.val(searchInputMain.val());
},
onCheckOut: function(element){}
}
]

Change log:

2016-01-02

• Bug fix in function scroolly.getTransitionValue.

2014-09-15

• polyfill Object.key for non-ECMA5 browsers (IE<9, FF<4,SF<5, OP<12)

---

This awesome jQuery plugin is developed by chayka. For more Advanced Usages, please check the demo page or visit the official website.