Проблемы с анимацией последовательности изображений ScrollMagic на сервере - PullRequest
Новая
       19

Проблемы с анимацией последовательности изображений ScrollMagic на сервере

0 голосов
/ 01 марта 2019

У меня есть анимация последовательности изображений, которая работает на прокрутке.Он отлично работает как HTML-страница, которую я открываю с ноутбука в браузере (локальный файл), но работает очень странно на живом веб-сайте с сервера ...

Когда я открываю его, чтобы увидеть на живом веб-сайтеон зависает, не переключает изображения и плавная анимация не работает так, как работает на моем локальном хосте ... и т. д.

У меня 61 изображение в последовательности, возможно, из-за большого количестваизображения в последовательности?

Вот исходный код: 

<img id="lotus" src="images/lotus-sprite/tile0.png">

JS 

    // define images
var images = [];

for(var i = 60; i>=0; i--){
     images.push("images/lotus-sprite/tile"+i+".png");
}


// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj = {curImg: 0};

// create tween
var tween = TweenMax.to(obj, 0.5,
    {
        curImg: images.length - 1,  // animate propery curImg to number of images
        roundProps: "curImg",               // only integers so it can be used as an array index
        repeat: 1,                                  // repeat 3 times
        immediateRender: true,          // load first image automatically
        ease: Linear.easeNone,          // show every image the same ammount of time
        onUpdate: function () {
          $("#lotus").attr("src", images[obj.curImg]); // set the image source
        }
    }
);

// init controller
var controller = new ScrollMagic.Controller();

// build scene
var scene = new ScrollMagic.Scene({offset: 0, duration: 1500})
                .setTween(tween)
                .addTo(controller);

});
...