如何使用jQuery或Javascript对角滚动

Question

是否有使用javascript或jQuery对角滚动的项目或插件？

例如,当您向下滚动内容时,它会被拉到浏览器的左上角; 当您向上滚动时,您的内容将被拉到角落的右下方.

我看到一些类似的项目/网站,他们在滚动时动画他们的元素.大多数使用javascript的网站虽然有一些滞后效果.另一个我见过的是使用类似于"Nike a Better World"的html5 +视差效果(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;
}

​

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
    });
});?