Запросы 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); 

Возможно ли это с этим плагином? Есть простой способ сделать это? Я ничего не вижу в Документах.

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

    } 

}());