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); 

    } 

}());