动画化body>后台使用CSS和skrollr.js

Animating the <body> background using CSS and skrollr.js

本文关键字：CSS skrollr js 后台 body 动画更新时间：2023-09-26

我想使用skrollr.js来动画<body>标签的background-position CSS属性。我想让它在页面滚动时稍微移动背景图像，给它一点情趣。然而，使用这个…

data-0="background-position: 0px 0px;" data-1000="background-position: 0px -250px;"

…不是工作。

我尝试使用<div>来完成壮举(动画其background-position)，但这并没有给我我正在寻找的效果。当我动画<div>的background-property时，background-position工作正常;但是一旦<div>滚动到视线之外，div后面的东西就会变得可见，这是我不想要的。有什么建议吗?

好了，我知道是什么导致了这个问题。我的CSS是这样写的:

background: url(/images/mainBG.jpg) no-repeat center fixed!important;

我需要删除"!"很重要"，这句话就像施了魔法一样奏效。但是…现在我注意到另一个问题(如果我得到解决，我会在这里发布答案)。我正在使用MasterPages将其实现到一个4.0 c# .net网站中(在这里查看此操作:brugrill.ntxdesigns.com)。考虑到所有的.aspx页面都有不同的长度，我不能在MasterPage中使用skrollr.js，因为它根据"data-"属性设置页面的高度，所以如果页面比"data-"属性的像素位置长(假设页面是5000像素，"data-"属性是1000)，背景滚动在页面完成滚动之前停止。如果"data-"属性比页面的像素长，页面在应该停止后继续滚动，这看起来很糟糕(正如你可以从上面的链接看到的)。我希望我可以使用this.Page.Master.FindControl的代码隐藏来找到body控制标签，并将"data-"属性修改为我需要的值。

是否有一种方法通过javascript, jquery或以其他方式获得页面的当前像素长度，并在"data-"属性中使用该值?这样我就不用硬编码这些数据了，如果页面变大，值也会变大。任何建议都会很棒!