动画演示 使用CSS和skrollr.js背景(Animating the <body&

2019-10-20 07:07发布

我想动画background-position的的CSS属性<body>使用标记skrollr.js 。 我希望它稍微移动的背景图像作为向上的页面滚动,给它一点点香料。 但是,使用此...

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

......不工作。

我试图用一个<div>来完成这一壮举(动画的background-position ),但不给我,我要找的效果。 当我动画background-property<div>中, background-position正常工作; 但一旦<div>滚动淡出人们的视线,无论是背后div变得可见,这是我不想要的。 有什么建议么?

Answer 1:

好吧,我想通了什么导致了问题。 我有我的CSS这样写的:

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

我需要删除“!重要”和它的工作就像一个魅力。 但是......现在我已经注意到了另一个问题(我将在这里发布的答案,如果我得到解决)。 我实现成4.0 C#.net网站与MasterPages这(在行动中看到这样的位置:brugrill.ntxdesigns.com)。 考虑到所有的.aspx页面的将是不同长度的,因为它都将根据关你放什么在“数据 - ”属性页面的高度,我不能使用母版中的skrollr.js所以如果页面比“数据 - ”属性的像素位置较长(比如页面是5000个像素和财产的“数据 - ” 1000)的背景前的页面完成滚动滚动停止。 如果“数据 - ”性质大于页面的像素长度长,页面滚动不断后应该停止这看起来不好(你可以通过我的链接上面看到)。 我希望我可以使用代码隐藏了this.Page.Master.FindControl找到了身体的控制标签,并修改“数据- ”属性来我所需要的值。

有没有办法通过JavaScript和jQuery或以其他方式获得页面的当前像素的长度,并在“数据 - ”属性使用该值? 然后,我就不必硬编码这个数据,如果该页面的增长,价值增长。 任何建议将是巨大的!



文章来源: Animating the background using CSS and skrollr.js