How can I make JinvertScroll driven page load with page already scrolled left?

Question

I'm a novice programmer and could use some help. I have a page I've built around the JinvertScroll Jquery code. I want the page to load with the images already scrolled, so that the user is in fact unscrolling, or rather, scrolling in what would normally be backwards. This is the page, so you can see what I'm trying to do (I want the text coming out of the dragon's mouth to load so that it will unfurl as the user scrolls the mouse wheel): http://xofer.net/test/

Answer 1

I've download the jInverScroll source code and changed the code a bit, in order for the scrolling effect to work backwards on your example. Here are the changes I've made to the original code and the library:

index.html / Before:

  <div class="scroll section-1">
    <img src="images/horizon.png" alt="">

index.html / After:

  <div class="scroll section-1" style="left:-2650px">
    <img src="images/horizon.png" alt="">

script.js / Before:

$(function() {
    $.jInvertScroll([ '.scroll' ]);
});

script.js / After:

$(function() {
    $.jInvertScroll([ '.scroll' ], {
        reverse: true,
        initialWidth: -2650
    });
});

Source code for the library

jquery.jinvertScroll.js / Before:

// do the position calculation for each element
$.each(elements, function (i, el) {
    var deltaW = el.width() - winWidth;
    if (deltaW <= 0) {
        deltaW = el.width();
    }
    var pos = Math.floor(deltaW * scrollPercent) * -1;
    el.css('left', pos);
});

jquery.jinvertScroll.js / After:

// do the position calculation for each element
$.each(elements, function (i, el) {
    if ( config.reverse ){
        var pos = ( config.initialWidth + ( Math.abs(config.initialWidth) * scrollPercent ) );
    } else {
        var deltaW = el.width() - winWidth;
        if (deltaW <= 0) {
            deltaW = el.width();
        }
        var pos = Math.floor(deltaW * scrollPercent) * -1;
    }
    el.css('left', pos);
});