How to scroll diagonally using jQuery or Javascript

Question

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

eg. when you scroll your content, it will be pulled to the upper left corner of the browser; and when you scroll up, your content will be pulled in the lower right corner.

I see some similar project / website in which they animate their elements as they scroll. However, most sites using javascript have some delays with the effect. The other I saw uses the html5 + parallax effect similar to "Nike a Better World" ( http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/ )

Can you tell me where could be a good starting point? Basically I want to scroll elements diagonally left or right. If this can be done directly in HTML5, I would really think that since I feel it will have less latency or less computation.

Answer 1

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

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

Important options

• A “fixed” full-size and full-sized wrapper that contains all of your moving elements helps you animate the div more consistently based on the scroll position (which is actually a “keyframe number”).
• scroll_max, wrapper_width wrapper_height . / , / .
• " ", .
• , top left. bottom right. , , , $window.scrollTop() " ".

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

( jsFiddle):

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>