ScrollMagic媒體查詢？

Question

我正在使用發現的ScrollMagic插件here。我有一個問題，試圖跨多個屏幕尺寸固定一個對象。問題在於我在引腳的「duration」屬性中進行了硬編碼，但持續時間設置爲像素。而且由於像素不同，這取決於您使用的是什麼設備，因此會導致問題。這是我目前的代碼：

var controller = new ScrollMagic.Controller(); 

//Pen sticks to page (PATIENT-PAGE) 
new ScrollMagic.Scene({ 
    duration: 2300, 
    offset: 0 
}) 
.setPin(".patient-pen") 
.addTo(controller); 

這實際上很容易設置。現在，我真的想要做的是這樣的：

if(mobile == true) { 
    var myDuration == 500; 
} else { 
    var myDuration == 2300; 
} 

new ScrollMagic.Scene({ 
    duration: myDuration, 
    offset: 0 
}) 
.setPin(".patient-pen") 
.addTo(controller); 

這是可能的這個插件？是否有捷徑可尋？我沒有看到Docs中的任何內容。

Answer 1

我剛剛做了這個，它似乎現在工作。

(function(){ 
    var width = window.innerWidth, 
    height = window.innerHeight; 
    console.log(width + ' : ' + height); 

    if (width >= 768) { 
    //Pen sticks to page (HCP-PAGE) 
    new ScrollMagic.Scene({ 
     // duration: 2400, 
     duration: 2400, 
     offset: 0 
    }) 
    .setPin(".pen") 
    .addTo(controller); 

    //Pen sticks to page (PATIENT-PAGE) 
    new ScrollMagic.Scene({ 
     duration: 2300, 
     offset: 0 
    }) 
    .setPin(".patient-pen") 
    .addTo(controller); 
} else if (width < 768) { 
     //Pen sticks to page (HCP-PAGE) 
    new ScrollMagic.Scene({ 
     // duration: 2400, 
     duration: 1250, 
     offset: 0 
    }) 
    .setPin(".pen") 
    .addTo(controller); 

    //Pen sticks to page (PATIENT-PAGE) 
    new ScrollMagic.Scene({ 
     duration: 1250, 
     offset: 0 
    }) 
    .setPin(".patient-pen") 
    .addTo(controller); 

    } 

}());