Javascript Анимация значений в процентах

Question

У меня есть проект-клиент, который унаследовал, который использует javascript для создания различных эффектов анимации, в то время как пользователь прокручивает вниз по сайту (вроде как сайт параллакса).

Проблема заключается в том, что он меняет значения в пикселях, и теперь мы хотим, чтобы это процент пользователей.

Например, в этом коде слева слева находится слева слева, увеличивая его ширину от 0 до 750 пикселей, когда пользователь прокручивает 1800 пикселей. Он делает это через интервал 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 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%" 
     } 

},