是否有使用 javascript 或 jQuery 实现对 Angular 滚动的元素或插件?
例如当您向下滚动内容时,它会被拉到浏览器的左上角;当您向上滚动时,您的内容将被拉到 Angular 落的右下角。
我看到一些类似的元素/网站,它们在滚动时为元素设置动画。大多数使用 javascript 的网站在效果上都有一些滞后。另一个我看到的是使用 html5 + 视差效果类似于“耐克一个更美好的世界”(http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)
你能告诉我哪里可以作为一个好的起点吗?基本上我想向左或向右滚动元素。如果这可以在 HTML5 中简单地完成,我会高度考虑,因为我觉得它会减少延迟或完成更少的计算。
最佳答案
我能够在 fiddle 中创建您想要的效果:
http://jsfiddle.net/t0nyh0/8QTYt/36/
重要花絮
- 包含所有移动元素的“固定”全宽和全高包装器可帮助您根据滚动位置(这实际上是“关键帧”编号)更一致地为 div 设置动画。
scroll_max
、wrapper_width
和wrapper_height
有助于标准化包装器的尺寸。 IE。滚动条的最底部对应于 wrapper 的底部/右侧,滚动条的最顶部对应于 wrapper 的顶部/左侧。- 将您的 body 高度设置为您想要的任意数量的“关键帧”。
- 要在向下移动时从左上角移动到右下角,请调整
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;
}
Javascript
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
});
});
关于javascript - 如何使用 jQuery 或 Javascript 沿对 Angular 线滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9689765/