Come scorrere in diagonale con jQuery o Javascript

Question

Esistono progetti o plug-in che utilizzano javascript o jQuery per scorrere in diagonale?

ad es. quando scorri verso il basso i tuoi contenuti, verrebbero estratti nell'angolo in alto a sinistra del browser; e quando scorri verso l'alto il tuo contenuto verrebbe tirato in basso a destra nell'angolo.

Vedo alcuni progetti/siti Web simili che animano i loro elementi durante lo scorrimento. La maggior parte del sito che usa javascript ha alcuni ritardi con l'effetto però. Un altro che ho visto sta usando html5 + effetto parallasse simile a "Nike a Better World" (http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)

Potete indicarmi dove può essere un buon punto di partenza? Fondamentalmente voglio scorrere gli elementi in diagonale sinistra o destra. Se questo può essere fatto chiaramente in HTML5, ritengo altamente che poiché ritengo che avrebbe meno lag o meno calcoli eseguiti.

Answer 1

sono stato in grado di creare l'effetto che si voleva in un violino:

http://jsfiddle.net/t0nyh0/8QTYt/36/

Tidbits importanti

1. A "fisso" a tutta larghezza e il wrapper a tutta altezza che contiene tutti gli elementi mobili aiuta ad animare il div in modo più uniforme d sulla posizione di scorrimento (che è effettivamente il numero "keyframe").
2. scroll_max, wrapper_width e wrapper_height aiuta a normalizzare le dimensioni del wrapper. Cioè la parte inferiore dello scroll corrisponde alla parte inferiore/destra del wrapper e la parte superiore dello scroll corrisponde alla parte superiore/sinistra del wrapper.
3. Imposta l'altezza del tuo corpo su qualsiasi numero di "fotogrammi chiave" che desideri.
4. Per spostarsi da in alto a sinistra a in basso a destra in basso, regolare le proprietà top e left. Per il contrario, regola le proprietà bottom e right. Ovviamente, dovrai formulare i tuoi calcoli per animazioni più complesse, ma sappi che fare $window.scrollTop() ti darà il numero "keyframe".

HTML

<div id="wrapper"> 
    <div id="a"> 
     <h1>Meats</h1> 
    </div> 
    <div id="b"> 
     <h1>Veggies</h1> 
     <hr/> 
     <p>Veggies sunt bona vobis, proinde vos postulo esse magis daikon epazote peanut chickpea bamboo shoot rutabaga maize radish broccoli rabe lotus root kohlrabi napa cabbage courgette mustard squash mung bean.</p> 
    </div> 
</div>​ 

CSS

body 
{ 
    height: 1000px; // 1000 keyframes 
} 

#wrapper 
{ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    border: 2px solid navy; 
    overflow:hidden; 
} 

#a { 
    position:absolute; 
    background-color: #daf1d7; 
    width: 300px; 
    height: 300px; 
} 
#b 
{ 
    position: absolute; 
    background-color: #d2d0ee; 
    width: 200px; 
    height: 200px; 
    bottom: 0px; 
    right: 0px; 
} 

javscript

var $window = $(window); 
var $a = $('#a'); 
var $b = $('#b'); 

var scroll_max = document.documentElement.scrollHeight - document.documentElement.clientHeight; 
var wrapper_height = $('#wrapper').height(); 
var wrapper_width = $('#wrapper').width(); 

$window.scroll(function() { 
    console.log(scroll_max); 
    $a.css({ 
     'top': ($window.scrollTop()/scroll_max) * wrapper_height, 
     'left': ($window.scrollTop()/scroll_max) * wrapper_width 
    }); 
    $b.css({ 
     'bottom': ($window.scrollTop()/scroll_max) * wrapper_height, 
     'right': ($window.scrollTop()/scroll_max) * wrapper_width 
    }); 
});​ 

Answer 2

Ecco una possibile soluzione per voi (jsFiddle example):

jQuery:

$(window).scroll(function() { 
    console.log($(this).scrollTop()); 
    $('#a').css({ 
     'width': $(this).scrollTop(), 
     'height': $(this).scrollTop() 
    }); 
    $('#b').css({ 
     'width': 300-$(this).scrollTop(), 
     'height': 300-$(this).scrollTop() 
    }); 
}); 

CSS:

#a,#b { 
    position:fixed; 
    background: orange; 
} 
#a{ 
    top:0; 
    left:0; 
} 
#b { 
    bottom:0; 
    right:0; 
    width:300px; 
    height:300px; 
} 
body { 
height:2000px; 
} 

HTML:

<div id="a"></div> 
<div id="b"></div>