Animated scrolling with elaborate test console

Animated scrolling with elaborate test console

Hi y'all,

First post here. After coming across a lot of jQuery while googling and realising it's potential, I was completely converted to using it.
That wasn't too long ago but I've been reading up and experimenting...
After creating a few parallax images, I started looking for a good smooth scrolling solution.
Not finding a satisfying answer, I went ahead and wrote something myself :

  1. $(document).ready(function() {

    $(window).resize(function() {edge = ($(document).height()-$(window).height())});

  3. var edge = ($(document).height()-$(window).height();
    var turned = 0;
    var flow;
    var prospect;
    var sequence;

        $('html, body').mousewheel(function(event, delta) {

        var motion = 125;
        var leap = 1.35;
        var timespan = 500;
        var sloth = 1.25;
        var limit = 5;
        var reset = 85;
        var method = 'easeOutQuad';

        var outset = $(window).scrollTop();
        var scroll = true;
        var direction = delta;
        var brake = turned-1;

            if (delta == -1 && outset == edge || delta == 1 && outset == 0) scroll = false;
            if (scroll) {
            turned = turned+1;
            if (turned > 2 && direction != flow) turned = turned-brake;
            if (turned > limit) turned = limit;

        var distance = -delta*motion*Math.pow(leap, (turned-1));
        var term = timespan*Math.pow(sloth, (turned-1));
        var destination = outset+distance;

            $('html, body').stop(true).animate({scrollTop: destination}, {
                start: function() {
                    flow = direction;
                },
                duration: term,
                easing: method,
                progress: function(prospect, sequence) {
                    if (100*sequence >= reset) turned = 0;
                    if ((destination > edge && $(window).scrollTop() == edge)
                    || (destination < 0 && $(window).scrollTop() == 0))
                    {$('html, body').stop(true, true); turned = 0}
                }
            });
            }

        return false;
        });
    });


http://ataredo.com/morphology/lucidscroll/


Works like a charm, especially with the help from mousewheel.js and special easing.

Then I got motivated and created this elaborate test page :


http://ataredo.com/morphology/lucidtest/

All the variables can be adjusted and tried out there.

Bunch of data is available as well and it even has a live graphic stream...


Hope you like it! Very entertaining and educational to myself at least.