動畫 <body> 使用CSS和skrollr.js的背景
[英]Animating the <body> background using CSS and skrollr.js
問題描述
我想使用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-property background-position可以正常工作； 但是一旦<div>滾動到視線之外， div后面的任何內容都將變為可見，這是我不想要的。 有什么建議么？
1 個解決方案
解決方案1
0 已采納 2014-06-15 22:13:13
好的，我知道是什么原因引起的。 我的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一起使用，以查找主體控件標簽並將“ data-”屬性修改為所需的值。
有沒有辦法通過javascript，jquery或其他方式獲取頁面的當前像素長度，並在“ data-”屬性中使用該值？ 這樣，我就不必對這些數據進行硬編碼，並且如果頁面增加，則值也會增加。 任何建議都很好！
使用skrollr.js和ID為“ skrollr-body”的多個div時，滾動在android中不起作用
[英]Scroll doesn't work in android on using skrollr.js and multiple divs with id “skrollr-body”
如何使用javaScript添加新的數據屬性（使用skrollr.js）
[英]How to add new data attribute with javaScript ( using skrollr.js)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.