gpt4 book ai didi

jquery - 有没有办法在 DIV 中进行视差工作

转载 作者:搜寻专家 更新时间:2023-10-31 21:56:52 25 4
gpt4 key购买 nike

可能完全找错了树,但你能用 div background-image 元素制作视差滚动图像吗?

我想要发生的是我目前有一些带有文本效果翻转的图像的 DIV,但是当我在背景图像中使用视差时,我想保留所有站点图像的 3D 主题。

编辑:例如,是否可以在此页面上制作蓝色框:

www.parkhallmanor.co.uk/new

使用视差效果滚动单独的图像?

最佳答案

是的,这是可能的。

正如您可能知道的那样,正常的视差效果只是将 bg 图像放在 body 标签上,并在您滚动时更改其背景偏移,或者以低于滚动速度的速度移动其顶部的一些 div。

由于您想要在每个窗口中使用单独的图像,因此您需要使用背景偏移方法。每个 div 在 CSS 中就像这样:

#div1 {
background: url('/ui/div1bg.jpg') 0 -800px no-repeat;
}

0 -800pxbackground-position .当窗口向下滚动时,您希望通过逐渐增加第二个值来向下移动背景,以模拟透视。在模拟视角中,较远的事物从您身边缓慢移动,近处的事物快速移动。

所以你只得到滚动事件:

$(window).scroll(function () {
parallax();
});

收集您将使用的指标:

function parallax() {
var ev = {
scrollTop: document.body.scrollTop || document.documentElement.scrollTop
};
ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
render(ev);
}

并呈现更改:

function render(ev) {
var t = ev.scrollTop;
var y = Math.round(t * 2/3) - 800;
$('#div1, #div2, #div3').css('background-position', '0 ' + y + 'px');
}

因此,随着 t 变量的增加(用户向下滚动),图像以 2/3 的速率移动。它从 -800px 开始,一旦用户向下滚动到 1200px,它就会逐渐变为 0。如果页面长于 1200 像素并且元素仍然可见,则您必须调整数学,因为之后代码将滚动到图像顶部。不过,如果到那时它们已经超过了该元素,您可以忽略它。

显然,您应该调整那里的数字以获得正确的 div 和图像效果。

如果你想将它基于总页面高度,不管它是什么,你可以使用上面的第二个指标,.ratioScrolled,比如:

var y = Math.round((1 - ev.ratioScrolled) * -100);

因此,例如,如果您有一个高度为 150 像素的 div,以及一个高度为 250 像素的图像,则上面的代码将完美运行 - 它从 -100 像素(向上移动)开始,并且随着页面滚动,无论它发生多长时间是的,它在 0px 处结束(没有移动 - 所以底部的 100px 被剪掉了)。

关于jquery - 有没有办法在 DIV 中进行视差工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15465481/

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