具有视差滚动的全视口高度图像

时间:2013-07-28 13:53:10

标签: javascript jquery html css parallax

我希望页面的某些部分能够填写至少100%的视口高度,而不管屏幕大小如何。我还希望各部分的内容和背景能够以视差效果滚动

我在页面上有jQuery并使用以下内容将.parallax部分调整为完整视口高度:

var imageFit = function() {
  windowHeight = $(window).height();
  $('.parallax').css('min-height', windowHeight);
};

$(document).ready(imageFit);
$(window).resize(imageFit);

我知道单位vhvw,但由于浏览器支持不佳,我不想使用它们。 (顺便说一句,我对javascript非常不好,所以请尽可能帮助我改进这一点。)


以下是具有100%视口高度部分的笔:http://codepen.io/Mest/full/GpycL (如果不熟悉Codepen;请单击左下角的编辑以编辑代码)。

这很好用,但我不是如何实现视差效果。我尝试使用Skrollr修改CSS属性以创建视差效果。然而,由于我的section获得了它的全视口高度height - 来自上面脚本的值似乎Skrollr认为它没有任何高度因此使视差“过渡”立即发生,因为我滚动。没有上面的调整大小脚本,它工作得很好。

可悲的是,我无法为你设置一个Skrollr示例,但我确认这是通过在我的CSS中为我的部分提供 X px的高度值然后将Skrollr作为它应该在滚动第一个 X px。

时滚动

因此,我的问题如下:

如何让Skrollr识别上面脚本设置的height

,或者

是否有更好/更简单的方法来创建我想要的效果?是通过另一个滚动动画库还是使用不同的方法来填充视口高度?

1 个答案:

答案 0 :(得分:3)

不要忘记在imageFit结束时致电refresh()

如果你也包含https://gist.github.com/Prinzhorn/5796546,那就像

一样简单
var imageFit = function() {
   windowHeight = $(window).height();
   $('.parallax').css('min-height', windowHeight).refresh();
};