Javascript動畫值作爲百分比

我有一個客戶端項目，我繼承了使用javascript創建各種動畫效果，而用戶通過網站向下滾動（有點像視差網站）。Javascript動畫值作爲百分比

問題在於它改變了像素值，我們現在要做的是用戶百分比。

例如，當用戶向下滾動1800像素時，此代碼通過將其寬度從0增加到750px，從左側引入＃位置左側div。它在200px間隔內完成此操作。它通過寫行內CSS到DIV標籤：

{ 
        selector: '#location-left', 
        startAt: 1800, 
        endAt: 2000, 
        onEndAnimate:function(anim) {}, 
        keyframes: [ 
         { 
          position: 0, 
          properties: { 
           "top" : 0, 
           "width" : 0 
          } 

         }, 
         { 
          position: 1, 
          properties: { 
           "top" : 0, 
           "width" : 750 
          } 
         } 
        ] 
       }

我想要它做的，相反，是從0％到50％，實現這一目的。我最初的想法是計算了一套VAR標籤：

var a = $(document).width(); 
var a3= Math.floor(a * 0.3); // 30% 
var a5= Math.floor(a * 0.5); // 50% 
var a8= Math.floor(a * 0.8); // 80% 
etc.

之前，我有過遠鑽進這個兔子洞，不過，我想看看是否有一個更簡單的方法，我只是失蹤。

來源

2015-05-06 Ty Morton

請參閱this question。您可以將百分比放在引號中，例如：

{ 
    position: 0, 
     properties: { 
      "top" : "10%", 
      "width" : "30%" 
     } 

},

來源

2015-05-06 16:57:32 levelonehuman

由於幾個原因，這並不奏效。它必須是在開始點和結束點之間進行動畫處理的數值。 –

對不起，我想百分比會計算爲一個數值，然後動畫到更高的百分比（作爲數值）。在這種情況下，也許你的方法是最好的。我不確定你還能在這裏做什麼。 – levelonehuman

如果以這種方式工作會很好。 ☺️ –

Javascript動畫值作爲百分比

回答

相關問題