Question

我的意图：

1）下降途中的场景

2）不要在备份过程中固定或设置动画

3）如果用户随后向下滚动，则重新启动图钉和动画。

我在页面上有两个固定的部分-在到达设置的视口顶部时，固定在屏幕顶部的部分-但我不希望用户必须向后浏览动画在备份页面的途中。

设置反向：false不能解决此问题-分隔符仍然存在，并且用户必须滚动浏览空白，这更糟！我已经将场景的设置移到了函数中，以便在用户滚动到页面顶部然后再次向下滚动时，可以重新初始化场景一次。

var animateScene = new TimelineLite()
  animateScene.to("#animateScene", 1, {x:'-80%'})
   .to(".progress-bar", 1, {width:"100vw"}, 0);

function initScene() {

 var scene = new ScrollMagic.Scene({
   triggerElement: "#scene",
   triggerHook: 'onLeave',
   duration: 4000,
   tweenChanges: true,
   reverse: false
 }).setPin("#scene").setTween(animateScene).addTo(controller);

 scene.on("end", function(){
     scene.remove();
     scene.removePin();

   $('.progress-bar').addClass('complete');
   resetScene();
 });

 }

function resetScene() {

 var sceneProgress = new ScrollMagic.Scene({
   triggerElement: ".complete",
   triggerHook: 'onEnter'
 }).addTo(controller);

 sceneProgress.on("leave", function(){
   sceneProgress.remove();
   $('.progress-bar').removeClass('complete');
   animateScene.time(0);
   initScene();
   });

  }

   initScene();

此代码有效，但是这里发生的事情是，动画完成后，将隔离物移除，然后页面跳到底部-我猜是按移除的隔离物的距离来看，这看起来很可怕-由于已被占用的空间。

有人能指出我要去哪里了吗？

移除固定场景后，Scrollmagic跳变问题

0 个答案: