如何使用jQuery或Javascript对角滚动

是否有使用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

 
 
 
Meats
 
 
 
Veggies
 
 
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.
 
 
​ 

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：