Блог

Я пытаюсь получить фрагмент кода (я нашел в руководстве), который использует параллакс по оси X, чтобы также влиять на ось Y в соответствии с перемещениями мыши.. только я очень новичок в синтаксисе JavaScript и не знаю, как это реализовать. У меня есть только 2 слоя, которые я хочу переместить соответствующим образом (level0 и level2). До сих пор мне не удавалось перемещать оси X и Y в результате.. он хочет влиять только на одну ось за раз.

Можете ли вы выяснить, как повлиять на ось Y, а также на X ?

Я попытался удвоить функцию после запуска первой. Не работает.

Пожалуйста, пожалуйста, пожалуйста .. любая подсказка была бы высоко оценена.

 stage.on("stagemousemove", throttle( function(evt) {

    var hOffset = (evt.stageX - env.compWidth/2) * 2;
    // the following bit I wrote (only this one line right here)    
    var hOffsetY = (evt.stageY - env.compHeight/2) *2;
    // Tween layers with distanceFactor 
    createjs.Tween.get(content.level0, {override:true}).to({x: env.level0_initialX - (hOffset / 25) }, 1072, createjs.Ease.cubicOut);   
    createjs.Tween.get(content.level2, {override:true}).to({x: env.level2_initialX - (hOffset / 18) }, 1072, createjs.Ease.cubicOut);
    },100));
  

Вы можете применить y tween в одном и том же Tween.to() вызове для каждого слоя.

 stage.on("stagemousemove", throttle( function(evt) {

    // Determine the horizontal and vertical offset
    var hOffset = (evt.stageX - env.compWidth/2) * 2;
    var hOffsetY = (evt.stageY - env.compHeight/2) *2;

    // Tween layers with distanceFactor 
    createjs.Tween.get(content.level0, {override:true}).to({
        x: env.level0_initialX - (hOffset / 25),
        y: env.level0_initialY - (hOffsetY / 25) // <------------------ here
    }, 1072, createjs.Ease.cubicOut);   
    createjs.Tween.get(content.level2, {override:true}).to({
        x: env.level2_initialX - (hOffset / 18),
        y: env.level2_initialY - (hOffsetY / 18) 
    }, 1072, createjs.Ease.cubicOut);

},100));
  

Если вы просто дублируете два tweens, это не сработает, потому что этот пример настроен на удаление tweens при каждом запуске (с использованием override:true ). Это предотвращает одновременное воздействие нескольких подростков на один и тот же объект.

Обратите внимание, что tweens на самом деле не лучшее решение для чего-то подобного, когда вы постоянно перезапускаете его при перемещении мыши. Лучшее решение — просто иметь функцию на tick, которая постоянно перемещает ваши слои к цели, которая обновляется при mousemove. Часто эффекты параллакса также реагируют непосредственно на мышь, вместо того, чтобы вставать на место.

Приветствия,