Skrollr褪色文本將無法正常工作，但所有其他skrollr元素都可以正常工作

在我網站上的某些元素上使用skrollr有一些問題。它適用於背景，但我試圖淡入和出文本的div，它不會工作...我一定是做錯了，所以我創建了一個jsfiddle來顯示這個問題。希望有人知道我做錯了什麼。Skrollr褪色文本將無法正常工作，但所有其他skrollr元素都可以正常工作

HTML代碼

<div class="container" id="test"> 
    <div class="section"></div> 
</div> 
<div class="container" id="info"> 
    <div class="section-wrapper"> 
    <div class="row section" data-center="background-position: 0 50%;" data-bottom-top="background-position: 0px 40%;" data-anchor-target="#info"> 
     <div id="info-wrapper" class="col-md-6 col-md-offset-5" data-center="opacity: 1" data-bottom-top="opacity: 1;" data-anchor-target="info-wrapper"> 
     <h2>Test</h2> 
     <p>This text isn't fading in or out... What is wrong?</p> 
     </div> 
    </div> 
    </div> 
</div>

CSS

html { 
overflow-y: scroll; 
} 

.navbar { 
opacity:0.9; 
filter:alpha(opacity=90); /* For IE8 and earlier */ 
} 

#top-nav .active { 
border-bottom: 3px #643b8d solid; 
} 

.section { 
/*margin-top: -50px;*/ 
padding-top: 50px; 
margin: 10px 0; 
} 

#test .section { 
background:url(http://ihatetomatoes.net/demos/parallax-scroll-effect/img/bcg_slide-5.jpg) no-repeat center; 
background-size: cover; 
background-attachment: fixed; 
height: 750px; 
width: 100%; 
position: relative; 
} 

#info .section { 
background:url(http://ihatetomatoes.net/demos/parallax-scroll-effect/img/bcg_slide-5b.jpg) no-repeat center; 
background-size: cover; 
background-attachment: fixed; 
height: 750px; 
width: 100%; 
position: relative; 
} 

#info-wrapper { 
background-color: rgba(255,255,255,0.75); 
opacity: 0; 
}

Example here

感謝

來源

2014-04-02 DeucePie

未捕獲的異常：無法找到錨點目標「信息包裝」

這是data-anchor-target="#info-wrapper"不是data-anchor-target="info-wrapper"。除此之外，這兩個關鍵幀都定義了opacity:1。

更正：http://jsfiddle.net/ak7Bg/1/

來源

2014-04-02 06:34:20 Prinzhorn

嘿@Prinzhorn我所做的更改到我的網站和它的工作！然而，在刷新時，它沒有...如果我在控制檯上運行skrollr.init（）。refresh（），我可以再次運行它...所以別的東西似乎成了問題。你有什麼想法？我已經把init代碼放在最下面，我的其他skrollr元素沒有問題，除了這個特定的文本正在淡入淡出之外... – DeucePie

所有圖像加載後調用init/refresh。 – Prinzhorn

我已將init放在標記之前的最底部。不工作的元素是文本本身，但背景圖像工作...有一些我沒有得到。另外，我認爲init不刷新就刷新了。 – DeucePie

Skrollr褪色文本將無法正常工作，但所有其他skrollr元素都可以正常工作

回答

相關問題