Comment faire défiler en diagonale avec jQuery ou Javascript

Question

Y at-il des projets ou des plugins qui utilisent javascript ou jQuery pour faire défiler en diagonale?

par exemple. lorsque vous faites défiler votre contenu, il serait tiré dans le coin supérieur gauche du navigateur; et quand vous faites défiler votre contenu serait tiré en bas à droite du coin.

Je vois un projet/site web similaire qui anime leurs éléments lors du défilement. La plupart du site qui utilise javascript a cependant quelques retards avec l'effet. Un autre que j'ai vu utilise html5 + effet parallaxe similaire à "Nike un monde meilleur" (http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)

Pouvez-vous me dire où peut être un bon point de départ? Fondamentalement, je veux faire défiler les éléments en diagonale gauche ou droite. Si cela peut être fait clairement en HTML5, je le considérerais très bien puisque je pense qu'il y aurait moins de décalage ou moins de calculs.

Answer 1

j'ai pu créer l'effet que vous vouliez dans un violon:

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

Tidbits importants

1. A "fixe" pleine largeur et wrapper pleine hauteur qui contient tous vos éléments en mouvement vous aider à animer la div plus systématiquement base d sur la position de défilement (qui est effectivement le numéro "image clé").
2. scroll_max, wrapper_width, et wrapper_height aide à normaliser les dimensions de l'emballage. C'est à dire. le bas du rouleau correspond au bas/à la droite de l'emballage, et le haut du rouleau correspond au haut/à gauche de l'emballage.
3. Réglez la hauteur de votre corps sur le nombre d'images clés que vous voulez.
4. Pour passer du haut à gauche au bas à droite en descendant, ajustez les propriétés top et left. Pour le contraire, ajustez les propriétés bottom et right. Bien sûr, vous aurez besoin de formuler vos propres calculs pour des animations plus complexes, mais sachez que faire $window.scrollTop() vous donnera le numéro "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

Voici une solution possible pour vous (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>