gpt4 book ai didi

javascript - 具有视差滚动的全视口(viewport)高度图像

转载 作者:行者123 更新时间:2023-11-30 12:59:10 25 4
gpt4 key购买 nike

无论屏幕尺寸如何,我都希望页面的某些部分至少 100% 的视口(viewport)高度。我还希望部分的内容和背景以视差效果滚动

我在页面上使用了 jQuery 并使用以下命令将 .parallax 部分的大小调整为全视口(viewport)高度:

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

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

我知道单位 vhvw 但我不想使用它们,因为浏览器支持很差。 (顺便说一句,我真的很不擅长 javascript,所以如果可能请帮助我改进它)。


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

这很好用,但是我不知道如何实现视差效果。我试过使用 Skrollr修改 CSS 属性以创建视差效果。然而,由于我的 section 从上面的脚本中获取了它的完整视口(viewport)高度 height 值,所以 Skrollr 似乎不认为它有任何高度,从而使视差“过渡” “在我滚动时立即发生。没有上面的调整大小脚本,它工作得很好。

遗憾的是,我无法为您设置一个 Skrollr 示例,但我通过在我的 CSS 中为我​​的部分提供 X px 的高度值,然后 Skrollr 充当它应该在滚动第一个 X 像素时。

因此,我的问题如下:

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

或者,

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

最佳答案

别忘了调用refresh()imageFit 的末尾。

如果您包括 https://gist.github.com/Prinzhorn/5796546同样,它会很简单

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

关于javascript - 具有视差滚动的全视口(viewport)高度图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17908899/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com