Как прокрутить по диагонали с помощью jQuery или Javascript

Question

Существуют ли проекты или плагины, которые используют javascript или jQuery для прокрутки по диагонали?

например. когда вы прокручиваете свой контент вниз, он будет вытянут в верхнем левом углу браузера; и когда вы прокрутите вверх, ваш контент будет вытянут в правом нижнем углу.

Я вижу несколько похожих проектов / веб-сайтов, которые анимируют свои элементы при прокрутке. Большинство сайтов, которые используют javascript, имеют некоторые лаги с эффектом. Другой, который я видел, использует html5 + эффект параллакса, похожий на «Nike a Better World» (http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)

Можете ли вы указать мне, где может быть хорошей отправной точкой? В основном я хочу прокрутить элементы по диагонали влево или вправо. Если это можно сделать явно в HTML5, я бы высоко оценил это, так как считаю, что будет меньше лагов или меньше вычислений.

Answer 1

Мне удалось создать нужный эффект в скрипке:

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

Важные лакомые кусочки

1. «Фиксированная» обертка полной и полной высоты, которая содержит все ваши движущиеся элементы, помогает вам более последовательно анимировать div на основе позиции прокрутки (которая фактически является числом «ключевого кадра»).
2. scroll_max, wrapper_width и wrapper_height помогают нормализовать размеры обертки. То есть самый нижний край свитка соответствует нижнему / правому краю обертки, а самый верхний край свитка соответствует верхнему / левому краю обертки.
3. Установите рост вашего тела на любое количество «ключевых кадров», которое вы хотите.
4. Чтобы перемещаться сверху вниз слева направо при движении вниз, настройте свойства 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;
}

1038 *

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>