как установить несколько setClassToggle для одного и того же триггера ScrollMagic - PullRequest
Новая
       39

как установить несколько setClassToggle для одного и того же триггера ScrollMagic

0 голосов
/ 12 апреля 2020

Я работаю с библиотекой ScrollMagi c для проекта.

Как установить несколько setClassToggle в одной и той же сцене запуска?

Мой код: 

 // move tree 1 to the left
var Waldscene01 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 600,
    duration: 1000
})
.setClassToggle('.scene01-baum1', 'translateX')  
.addTo(controller); 



// move tree 2 to the right
var Waldscene02 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 400,
    duration: 1000
})
.setClassToggle('.scene01-baum2', 'translateX')
.addTo(controller);

Как я могу объединить этот код?

Я пытался сделать это так, но это не сработало. Тогда работал только один .setClassToggle: 

 var Waldscene01 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 400,
    duration: 1000
})
.setClassToggle('.scene01-baum1', 'translateX')
.setClassToggle('.scene01-baum2', 'translateX')

.addTo(controller);

CSS

.scene01-baum1 {
    position: absolute;
    z-index: 3;
    top: 5%;
    left: 20%;
    width: 600px;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 6s ease-out;
}

.scene01-baum1.translateX {
    transform: translateX(-500px) scale(1.2);
    filter: blur(4px);
}

.scene01-baum2 {
    position: absolute;
    z-index: 3;
    top: 10%;
    left: 50%;
    width: 600px;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 5s ease-out;
}

.scene01-baum2.translateX {
    transform: translateX(400px) scale(1.2);
    filter: blur(4px);

}

Может ли кто-нибудь мне помочь?

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете использовать запятую для передачи нескольких селекторов, как это: 

 var Waldscene01 = new ScrollMagic.Scene ({
    triggerElement: '.scene01-wald',
    triggerHook: 0,
    offset: 400,
    duration: 1000
})
.setClassToggle('.scene01-baum1, .scene01-baum2', 'translateX')
.addTo(controller);
...