for that fancy scrolling effect you were always looking for.
Works pretty well with any layout you want.
The example just includes a basic setup for the sake of simplicity.
#Setup
<div id="wrapper-outer">
<div id="wrapper">
<div class="item">
<div class="inner">
</div>
</div>
</div>
.item {
transition: all 300ms ease;
}
var scroller = new FancyScroll();
scroller.scale = 0.1;
scroller.check = 50;
scroller.move = 200;
scroller.render = 2;
var items = document.querySelectorAll('.item');
var containerWidth = document.getElementById('wrapper').offsetWidth;
var containerHeight = document.getElementById('wrapper-outer').offsetHeight;
scroller.setEntries(items);
scroller.resize(containerWidth, containerHeight);
scroller.destroy();
FancyScroll.destroyAll();
####NOTE:
If your entries change while navigating just call scroller.setEntries() again.
You might want to listen to window.resize and call scroller.resize again to re-calculate offsets