How to scroll diagonally with jQuery or Javascript

Question

Are there projects or plugins that utilize javascript or jQuery to scroll diagonally?

e.g. when you scroll down your content, It would be pulled at the top-left corn

Answer 1

I was able to create the effect that you wanted in a fiddle:

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

Important Tidbits

1. A "fixed" full-width and full-height wrapper that holds all your moving elements help you animate the div more consistently based on the scroll position (which is effectively the "keyframe" number).
2. scroll_max, wrapper_width, and wrapper_height helps normalize the dimensions of wrapper. I.e. the very bottom of the scroll corresponds to the bottom/right of the wrapper, and the very top of the scroll corresponds with the top/left of the wrapper.
3. Set your body's height to whatever number of "keyframes" that you want.
4. To move from top left to bottom right on going down, adjust the top and left properties. For the reverse, adjust the bottom and right properties. Of course, you will need to formulate your own calculations for more complex animations, but know that doing $window.scrollTop() will give you the "keyframe" number.

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

Here's a potential solution for you (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>