Cómo desplazarse diagonalmente con jQuery o Javascript

Question

¿Hay proyectos o complementos que utilicen javascript o jQuery para desplazarse diagonalmente?

p. Ej. cuando se desplaza hacia abajo por su contenido, se tira en la esquina superior izquierda del navegador; y cuando se desplaza hacia arriba, su contenido se colocará en la esquina inferior derecha de la esquina.

Veo un proyecto/sitio web similar que animan sus elementos cuando se desplaza. La mayoría del sitio que usa javascript tiene algunos retrasos con el efecto. Otra que he visto es el uso del efecto html5 + parallax similar a "Nike a Better World" (http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)

¿Puede indicarme dónde puede ser un buen punto de partida? Básicamente quiero desplazar los elementos en diagonal hacia la izquierda o hacia la derecha. Si esto se puede hacer de forma clara en HTML5, lo consideraría mucho, ya que creo que se tardaría menos tiempo o se realizarían menos cálculos.

Answer 1

que fue capaz de crear el efecto que quería en un violín:

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

Probaditas importantes

1. A "fijo" de ancho completo y La envoltura de altura completa que mantiene todos sus elementos en movimiento lo ayuda a animar el div de forma más consistente. d en la posición de desplazamiento (que efectivamente es el número de "fotograma clave").
2. scroll_max, wrapper_width, y wrapper_height ayuda a normalizar las dimensiones de la envoltura. Es decir. la parte inferior del desplazamiento corresponde a la parte inferior/derecha del envoltorio, y la parte superior del desplazamiento corresponde con la parte superior/izquierda del envoltorio.
3. Establezca la altura de su cuerpo en la cantidad de "fotogramas clave" que desee.
4. Para pasar de la esquina superior izquierda a la inferior derecha al bajar, ajuste las propiedades top y left. Para el reverso, ajuste las propiedades bottom y right. Por supuesto, deberá formular sus propios cálculos para animaciones más complejas, pero sepa que al hacer $window.scrollTop() obtendrá el número de "fotograma clave".

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

Aquí es una solución potencial para usted (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>