Последующие сцены в ScrollMagic не работают - PullRequest
Новая
       16

Последующие сцены в ScrollMagic не работают

0 голосов
/ 17 октября 2018

Я использую ScrollMagic на моем сайте.Это одностраничный веб-сайт с 7 «разделами».Сначала анимация отлично, я борюсь с анимацией нескольких сцен.Мне нужно, чтобы каждый раздел был анимирован, когда пользователь прокручивает.Первый - нормально, а второй после добавления сцены - просто пустой.

(часть) HTML : 

<section id="slide1" ........>
    <div style="text-align: center;">
      <img id="racket" src="svg/racket.svg">
    </div>
    <div style="text-align: center;">
      <img id="racket2" src="svg/racket2.svg">
    </div>
    <div style="text-align: center;">
      <img id="racket3" src="svg/racket3.svg">
    </div>
</section>

<section id="slide2" .....>
    <div style="text-align: center;">
      <img id="earth" src="svg/earth.svg">
    </div>
</section>

JavaScript 

$(function() {

var controller = new ScrollMagic.Controller();

var slide1_moves = new TimelineMax()
    .to("#racket", 10, {x:500, y:-300, opacity: 0}, 0.2)
    .to("#racket2", 10, {x:-500, y:-400, opacity: 0}, 2)
    .to("#racket3", 10, {x:-200, y: -300, opacity:0}, 0.5)


var scene1 = new ScrollMagic.Scene({
        duration: 3000,    
        offset: 0        
    })
    scene1.setTween(slide1_moves)
    scene1.setPin("#slide1") 
    scene1.addTo(controller)  

var slide2_moves= new TimelineMax()
    .to("#earth", 10, {x:500, y:-300, opacity: 0}, 0.2)

// create a scene with custom options and assign a handler to it.
var scene2 = new ScrollMagic.Scene({
        duration: 5000,
        offset: 0
});
scene2.setTween(pohyby_slide2)
scene2.setPin("#slide2") 
scene2.addTo(controller)

});

1 Ответ

0 голосов
/ 17 октября 2018

Я не уверен на 100%, но я использую другой синтаксис на моей странице (которая работает).

Ваш код: 

var scene2 = new ScrollMagic.Scene({
        duration: 5000,
        offset: 0
});
scene2.setTween(pohyby_slide2)
scene2.setPin("#slide2") 
scene2.addTo(controller)

});

Я бы написал это по-другому (обратите внимание на многократное пропускание "scene2" и различную обработку точек с запятой и скобок: 

var scene2 = new ScrollMagic.Scene({
        duration: 5000,
        offset: 0
})
.setTween(pohyby_slide2)
.setPin("#slide2") 
.addTo(controller);
...