Scrollverhalten Quer beet ein.

[ciberjoerg]

Ich wollte mal fragen wie man das hinbekommt eine Website so zu scrollen das man schräg, links, und schräg hoch scrollen kann indem man die seite herrunter scrollt? beispiel Qlimax 2011 Live

ich finde das genial hat sonnst kaum jemand und wollte das auf meinem wg server einbauen. kann mir da jemand einen tip geben wie das heist oder wie ich das verwirklichen kann?

Edit:::

Nach ein bisschen "Quellcode spionage" hab ich herrausgefunden das es sich hierbei um die jquery-scrollto komponente handelt. in verbindung mit anderen jquery scripts lässt sich das wohl mit der maus ebenso ansteuern.

[thomas_E]

hab jetzt nicht in deren Code geschaut; würds ungefähr so aufbauen:
pseudocode:

PHP-Code:

var positions = [{x:0, y:0}, {x:800,y:300}, ...];    //positionen für die einzelnen Seiten
document.body.onscroll = function(){
    var f = scrollPosition/maxScrollPosition * (positions.length-1);   //0 <= f <= positions.length-1;
    var i = Math.floor(f);            //aktueller Index in positions (if f==i) oder lastIndex (für i < f < i+1)
    var px, py, pCurrent = positions[i];
    if(f == i){
        px = pCurrent.x;
        py = pCurrent.y;
    }else{
        var pNext = positions[i+1];
        f = f-i;            // 0 < f < 1
        px = pNext.x*f + pCurrent.x*(1-f);
        py = pNext.y*f + pCurrent.y*(1-f);
    }
    
    container.style.position = "relative";
    container.style.top = scrollPosition + dispLastay.height/2 - py;
    container.style.left = dispLastay.width/2 - px;
} 


ist der Code nachvollziehbar?

evtl kannst du im else-zweig auch noch ein easing einbauen:

PHP-Code:

/**
 * Cubic.easeInOut from aze.motion.easing
 * @author Philippe / http://philippe.elsass.me
 * @author Robert Penner / http://www.robertpenner.com/easing_terms_of_use.html
 */
function cubicEaseInOut(k) 
{
    if ((k *= 2) < 1) return 0.5 * k * k * k;
    return 0.5 * ((k -= 2) * k * k + 2);
} 


PHP-Code:

    //...
    }else {
        f = cubicEaseInOut(f-i);
    //...