Introduction
Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support.
It can be used as a simple scrollbar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.
Dependencies
- jQuery 1.7+
And that's it. You don't need 200KB of jQuery-UI to Sly :) In the future, I'd like to drop the jQuery dependency, and transform Sly into a reusable Component.
Compatibility
Sly works in every desktop browser, and due to some divine intervention, even in IE6+, but that is a complete accident. IEs lower than 8 are not officially supported :).
Mobile
Sly does touch events, and I'm generally trying to make it work everywhere, but the fact is that mobile is not tested. If you want to help with that, you are welcome :).
Changelog
Sly upholds the Semantic Versioning Specification.
Support
Reward the developer
And make him happy for maintaining this library! :)
I don't want to go the Isotope & family route and monetize my libraries. I want them to be accessible to everyone for any use case and any budget. That being said, free software isn't free, it's just paid by with developer's time, and right now I could use some help :)
Performance
In an attempt to achieve the most responsive experience with smoothest animations possible a lot of emphasis is placed on performance.
Sly has a custom high-performance animation rendering based around the Animation Timing Interface written directly for its needs. This provides an optimized 60 FPS rendering, and is designed to still accept easing functions from jQuery Easing Plugin, so you won't even notice that Sly's animations have nothing to do with jQuery :).
The animation of elements is done by GPU accelerated translate transforms, which rapidly increase the rendering speed in browsers that support it, with absolute positioning fallback for those that don't.
Helping with minimizing the frequency of frame drops due to inevitable JavaScript garbage collection are code optimizations that lower the garbage generation to a reasonable minimum.
To provide a super responsive & smooth synchronization when dragging the scrollbar handle, Sly uses a destination based animation function controlled by a synchronization factor instead of a duration based (tweening) animations that are unsuitable for this type of use case, and lead to a choppy, and unpolished experience. Another perk of writing your own animation rendering :).
This is the difference between earlier versions (using jQuery.fn.animate with unoptimized code) and Sly's current state:
Examples
All examples (except the Parallax one) are using a calling via jQuery proxy, because some people that are looking only at examples think that jQuery is a separate language and can't handle raw JavaScript. This'll hopefully help with lowering the "help me make it work" issue reports.
More advanced users can surely read the documentation and discover all the power & cool stuff that new Sly() provides :)
Documentation
Documentation can be found in the repository's docs directory.
Forum
If you have a general question about Sly, or having problems with implementation, please do not pollute the Github's Issue tracker, but use the Sly forum dedicated just for that.
I work on this for free in my spare time, so I cannot guarantee that you'll receive a support immediately, but I'll try to do my best to answer your questions.
I also reserve a right to ignore questions that could be solved by spending at least a minute reading the documentation. I've spent more than a day writing it, so every question with an answer that is already thoroughly documented is an insult to me, my ancestors, and makes my hamster curse like a sailor.
If you find the documentation lacking in some ways, that is a great New Issue candidate! Or, you know, the wiki is publicly editable... :)