[英]How to scroll diagonally with jQuery or Javascript
Are there projects or plugins that utilize javascript or jQuery to scroll diagonally? 是否有使用javascript或jQuery对角滚动的项目或插件?
eg 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.
大多数使用javascript的网站虽然有一些滞后效果。 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/ )
另一个我见过的是使用类似于“Nike a Better World”的html5 +视差效果( 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.
如果可以在HTML5中明确地做到这一点,我会高度考虑,因为我觉得它会有更少的滞后或更少的计算。
I was able to create the effect that you wanted in a fiddle: 我能够在小提琴中创造你想要的效果:
http://jsfiddle.net/t0nyh0/8QTYt/36/ http://jsfiddle.net/t0nyh0/8QTYt/36/
Important Tidbits 重要的花絮
scroll_max
, wrapper_width
, and wrapper_height
helps normalize the dimensions of wrapper. scroll_max
, wrapper_width
和wrapper_height
有助于规范化包装器的维度。 Ie 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. top
and left
properties. top
和left
属性。 For the reverse, adjust the bottom
and right
properties. bottom
和right
属性。 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. $window.scrollTop()
将为您提供“关键帧”编号。 HTML 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 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 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
});
});
Here's a potential solution for you ( jsFiddle example ): 这是一个潜在的解决方案( jsFiddle示例 ):
jQuery: 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: 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: HTML:
<div id="a"></div>
<div id="b"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.