Skrollr在更小的屏幕上 - jQuery更改多個未知道具

我使用skrollr來動畫svg。我正在爲頁面上的東西製作動畫。該代碼是由數以百計的路徑看起來像這樣的：Skrollr在更小的屏幕上 - jQuery更改多個未知道具

<path data-100="stroke-dashoffset:-129;" data-400="stroke-dashoffset:0;" id="v3" fill="none" stroke="#EEB853" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" 
M561.922,268.727c21,20.96,35-21.5,58-14.475c17.5,4.475,34.836,27.435,36.836,35.435" style="stroke-dasharray:6000;" />

只是爲了簡化，你可以認爲它是這樣的：

data-100="stroke-dashoffset:-129;" data-400="stroke-dashoffset:0;"

數數據 - 是像素數下來以後用戶滾動設置樣式。因爲不同的屏幕有不同的高度我要：通過所有的路徑

檢查屏幕高度
環
帶走一些數據 - 數的像素的視高度

所以在較小的屏幕上，你可能最終與

data-50="stroke-dashoffset:-129;" data-350="stroke-dashoffset:0;"

Is this link the best way to do it?有沒有人對此有任何其他建議？

來源

2013-08-19 Djave

你不能使用常量（https://github.com/Prinzhorn/skrollr#working-with-constants）嗎？ – Prinzhorn

是的！我可以。謝謝。 – Djave

由於@prinzhorn指出的那樣，我設法它只是通過執行以下操作：

var OFFSET = ($(window).height/5); 

$(document).ready(function(){ 
    if($("#timeline").length > 0){ 
     var s = skrollr.init({ 
      constants: { 
       screen_offset : OFFSET 
      } 
     }); 
    } 
});

然後：

<path data-_screen_offset-100="stroke-dashoffset:-5772;" data-_screen_offset-5300="stroke-dashoffset:0;"/>

記得刪除傳遞到對象下劃線skrollr。

來源

2013-08-19 20:30:36 Djave

你應該接受你自己的答案。 – Prinzhorn

感謝您保持所有的skrollr堆棧溢出的東西。 – Djave

Skrollr在更小的屏幕上 - jQuery更改多個未知道具

回答

相關問題