如何使用滾動百分比的jQuery來旋轉html元素？

我想滾動滾動div。
當我向下滾動頁面的25％時，我希望元素被旋轉90 *，當我滾動頁面的50％時，我希望它旋轉180 *，等等。

有人建議我使用jQueryRotat.js，我把它全部填充到JSfiddle中，但是我無法使它工作。您可以檢查什麼，我已經在這裏：JSFiddle 如何使用滾動百分比的jQuery來旋轉html元素？

這是我走到這一步，

HTML：

<div class="site_wrapper"> 
    <div class="logo"> 
     <h1>Logo</h1> 
    </div> 
</div

CSS：

.site_wrapper{ 
    max-width:200px; 
    height:10000px; 
    margin:auto; 
    background:#555; 
} 

.logo{ 
    width:150px; 
    height:150px; 
    margin-left:-75px; 
    border-radius:50%; 
    background:url(http://www.gielesdesign.nl/imgs/textures/texture-1.jpg); 
    position:fixed; 
    top:50px; 
    left:50%; 
    text-align:center; 
}

來源

2013-09-30 Pepijn Gieles

可能希望包含在這個問題的JavaScript太大的完整性。 –

*「未捕獲的ReferenceError：windowHeight沒有定義」*旋轉插件甚至沒有在您的小提琴中執行 –

您尚未將任何函數附加到onscroll事件 –

我讓fiddle你（用可選緩存）

使用

$(window).scroll(function(){});

來源

2013-09-30 15:12:49 deerua

好吧，eehm。我希望它順利旋轉，當你滾動時，它會旋轉，當你向後滾動時，它會以相反的方向旋轉。 –

Patrick Evans給出了正確的解決方案 – deerua

必須同時附上你的函數$(document).scroll()，我也想你想使用$(document)而不是$(window)獲得頁面的高度。這是一個工作jsfiddle

來源

2013-09-30 15:14:02 Yoggi

你不是已經windowHeight還定義你沒有onscroll事件設置

$(document).ready(function(){ 
    var bodyHeight = $("body").height()-$(window).height(); 
    window.onscroll = function() { 

     //Determine the amount to rotate by. 
     var deg = -window.scrollY*(360/bodyHeight); 

     $(".logo").css({ 
     "transform": "rotate("+deg+"deg)", 
     }); 

    }; 
});

和Blazemonger的建議，減去身體高度窗口高度以獲得一個完整的旋轉時在頁面的末尾。

JSFiddle

來源

2013-09-30 15:17:35

你應該減去'$（窗口）。bodyHeight'的height（）'來獲得完整的旋轉。 http://jsfiddle.net/mblase75/NMQCy/13/ – Blazemonger

此外，OP使用[jQueryRotate.js]（https://code.google.com/p/jqueryrotate/）而不是直接的CSS3，可能是因爲插件支持舊版瀏覽器。 – Blazemonger

代碼有幾個問題。首先，只要使用$(window).on('scroll')事件滾動窗口，就需要觸發它。

其次，windowheight不是您的代碼中的變量。我用$(window).height()取代了它，但後來認爲它實際上並不必要，並且完全刪除了該測試。

最後，我更新了您的.rotate參數。初始angle應該是元素的當前角度，通過調用.getRotateAngle()方法獲得。終點角度（零到180度之間）可以通過將當前的scrollTop除以整個文檔的高度，減去窗口高度，然後再乘以-180來計算。

最終結果是一個徽標，可以在您上下滾動頁面時平穩地旋轉。

$(window).on('scroll', function() { 
     $(".logo").rotate({ 
      duration: 1, /* why wait? No easing needed now, either */ 
      angle: $('.logo').getRotateAngle(), 
      animateTo: -180 * $(window).scrollTop()/($(document).height() - $(window).height()) 
     }); 
});

http://jsfiddle.net/mblase75/nqm2w/

來源

2013-09-30 15:23:58 Blazemonger

如何使用滾動百分比的jQuery來旋轉html元素？

回答

相關問題