奇怪！doctype bug與視差插件'skrollr'

好吧，所以這在過去兩天一直讓我感到非常痛苦和悲傷，我終於縮小了問題的範圍，但絕不接近解決它的問題。奇怪！doctype bug與視差插件'skrollr'

我在使用Skrollr插件構建視差網站。只要出現<!doctype html>，該插件就會停止在我的文檔中運行。

我創建了一個新的簡單示例，它仍然產生相同的錯誤。

奇怪的是，在他們自己的網站上，他們宣佈與我一樣的<!doctype html>，但它在那裏工作。

我的代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Document</title> 
<style> 

    .section1{ 
     height:1000px; 
     background:gray; 
    } 

    .section1 img { 
     width:2000px; 
     height:1000px; 
    } 

    .section2{ 
     width:2000px; 
     height:1000px; 
     background:url('background2.jpg'); 
     position: absolute; 
    } 

    .section3{ 
     width:2000px; 
     height:1000px; 
     background:url('background3.jpg'); 
    } 

</style> 
</head> 
<body> 

<section class="section1"> 
    <div style="position:absolute; background:url('background1.jpg') no-repeat; width:100%; height:1000px; background-size:cover;" data-0="top:0;" data-1200="top:350px;"></div> 
</section> 
<section class="section2"></section> 
<section class="section3"></section> 

<script src="skrollr.min.js"></script> 
<script> 
    var s = skrollr.init({ 
      edgeStrategy: 'set', 
      easing: { 
       WTF: Math.random, 
       inverted: function(p) { 
        return 1-p; 
       } 
      } 
     }); 
</script> 

</body> 
</html>

來源

2013-07-25 Chris Till

在哪個瀏覽器中無法正常工作？如果它是IE添加到你的頭上，這樣IE就知道要正確渲染（不是在怪癖模式下） –

對不起，這不是在任何瀏覽器中工作。我目前正在Chrome中開發。 –

您應該詳細說明「不工作」是否在開發人員控制檯（F12）中看到任何錯誤？它是完全運作還是完全死亡？ –

您沒有爲第一個關鍵幀的top屬性的值指定單位。

此致：data-0="top:0;" 正確：data-0="top:0px;"

當省略DOCTYPE，瀏覽器變得越來越嚴格，假設你的意思是像素，當你設置top到100或相似。

參見：https://github.com/Prinzhorn/skrollr#limitations

所有數值都具有相同的單位。無法從0％到100px進行動畫製作。 skrollr不會抱怨，但結果是不確定的。

來源

2013-07-25 18:24:38 Prinzhorn

謝謝，昨晚我設法弄清楚了這一點。現在所有的作品都像是一場夢。偉大的插件btw工作。這是迄今爲止最好的視差插件。 –

我不能發表評論，但我有一個問題。你可以發佈一些HTML與你的CSS和JS，這樣我們可以得到更好的外觀。

作爲一個說明，如果不是，那麼你的代碼與他們的代碼有所不同，那麼在邏輯上，你應該工作。

你有沒有檢查你的CSS/JS對他們的，並確保沒有搞砸了？

來源

2013-07-25 14:41:17 Jacques

是的，我甚至熱他們的腳本鏈接！我真的不明白爲什麼這不起作用。所以我的項目是建立在前端樣板和咕嚕聲等laravel上。有很多變數可能是一個因素。於是我又重新開始創建了1個index.html（在我的操作系統中），如果我刪除了文檔類型，它就能完美工作。 –

刪除它，你的意思是你根本不聲明它？或者你的意思是你把它設置爲別的東西？ – Jacques

不要聲明它。如果我聲明任何文檔類型，它會中斷。我見過其他網站使用這個插件，他們正在使用doctype。 –

奇怪！doctype bug與視差插件'skrollr'

回答

相關問題