我正在尝试为文章创建视差滚动效果。这是我的HTML:包含文章和页脚的主包装div。文章的高度应始终与其子项占据的垂直空间的高度相匹配。
<div class="main-wrap">
<article>
<div class="hero">
<div class="hero__content">
<!-- content here -->
</div>
</div>
<div class="content">
<!-- content here -->
</div>
</article>
<footer>
<!-- content here -->
</footer>
</div>
现在,使用jQuery,我正在添加这些视差效果:
$(window).scroll(function(){
var scrollPos = $(this).scrollTop();
// parallax the hero text in fromt of the background image
$('.hero__content').css({
'top' : (225-(scrollPos*.2)) + 'px'
});
// parallax the article-content in front of the hero
$('.content').css({
'top' : (0-(scrollPos*.5)) + 'px'
});
});
视差部分工作正常。问题是我需要收缩文章的高度。否则,文章底部会有空白区域。
我在这里创建了一个CodePen:http://codepen.io/anon/pen/XmrLxJ 该文章被赋予红色背景颜色以显示额外的间距。我试过给文章元素CSS高度属性“继承”和“自动”,但这不起作用。
答案 0 :(得分:1)
T.L。 D.R.更改'top' : (0-(scrollPos*.5)) + 'px'
的行'margin-top' : (0-(scrollPos*.5)) + 'px'
您的问题是您正在使用javascript更改元素的位置,因为它具有relative
位置,元素将从其原始位置移动,但在渲染文档的其余部分时,原始位置仍然是熟悉的。
要解决此问题,您可以为在文档中移动元素的属性设置动画,而不是仅移动显示在其中的元素。
我不知道自己是否清楚自己,但如果您将动画从top
更改为margin-top
,则可以使用它。
但是.article-content
的动画很难被注意到。我在你的代码笔中删除了它,并没有注意到差异。
就像脚注一样,我使用这个库进行滚动效果,我发现它非常有用且易于使用 http://prinzhorn.github.io/skrollr/