如何用jQuery或Javascript对角滚动 [英] How to scroll diagonally with jQuery or Javascript

问题描述

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

例如。当你向下滚动你的内容，它会被拉在浏览器的左上角;

我看到一些类似的项目/网站，他们在滚动时动画他们的元素。大多数使用javascript的网站有一些滞后与效果。另一个我看到的是使用html5 +视差效果类似于耐克更好的世界（

重要文件

1. 一个固定的全宽度和全高度包装器，其中包含所有的移动元素，帮助您更加一致地基于滚动位置有效的关键帧数字）。


2. scroll_max ， wrapper_width wrapper_height 有助于规范包装器的尺寸。也就是说


3. 将您的身体的高度设置为任何值


4. 调整顶部和 code> left 属性。反之，请调整底部和右属性。当然，你需要为更复杂的动画制定你自己的计算，但是要知道， $ window.scrollTop（）会给你关键帧的数字。 li>
   

HTML

 < div id =wrapper> 
< div id =a> 
< h1>肉类< / h1> 
< / div> 
< div id =b> 
< h1>蔬菜< / h1> 
< hr /> 
< 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'： 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 
}）; 
} ; 
  

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 corner of the browser; and when you scroll up your content would be pulled at the bottom-right of the corner.

I see some similar project/website that they animate their elements when scroll. Most of the site that use javascript has some lags with the effect though. Another i've seen is using 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 point me where can be a good starting point? Basically I want to scroll the items diagonally left-or-right. If this can be done plainly in HTML5, I would highly consider that since I feel It would have less lag or less calculation being done.

解决方案

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

这篇关于如何用jQuery或Javascript对角滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！