Javascript动画值作为百分比

Question

我有一个客户端项目，我继承了使用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. 

之前，我有过远钻进这个兔子洞，不过，我想看看是否有一个更简单的方法，我只是失踪。

Answer 1

请参阅this question。您可以将百分比放在引号中，例如：

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

},