Question

我正在使用找到here的ScrollMagic插件。我试图在多种屏幕尺寸上固定一个对象时遇到问题。问题是我在＆＃34;持续时间＆＃34;中进行了硬编码。引脚的属性，但持续时间设置为像素。由于像素根据您使用的设备而有所不同，因此会导致问题。这是我目前的代码：

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

这个插件可以实现吗？是否有捷径可寻？我没有在文档中看到任何关于它的内容。

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

    }

}());

ScrollMagic媒体查询？

1 个答案: