ScrollMagic引腳間隔太大

我是ScrollMagic的新手，所以不確定是否有明顯的東西可以忽略。ScrollMagic引腳間隔太大

我已經成立了一個codepen這說明了什麼我想實現的，一個是alternative version幾乎我想要做什麼，只是有一個巨大的差距，我似乎無法擺脫。

基本上看，有3張幻燈片堆疊在一起。當用戶滾動時，幻燈片會一個一個地過渡，以顯示下面的一個。

當滾動瀏覽最後一張幻燈片時，頁面上的其餘內容應該向上滾動，就好像它連接到最終幻燈片的底部一樣，並且應該從那時起就像普通頁面一樣。

目前，包含所有幻燈片的容器與其餘內容透明地重疊，直到最終幻燈片從視口頂部消失爲止，而ScrollMagic正在執行此操作。

codepen中的粉色欄旨在顯示幻燈片容器底部完成的位置。

下面是相關代碼：

function initController() { 
    controller = new ScrollMagic.Controller({ 
     globalSceneOptions: { 
      triggerHook: "onLeave" 
     } 
    }); 

    controller.scrollTo(function(pos) { 
     TweenMax.to(window, 1, { 
      scrollTo: { 
       y: pos, 
       autoKill: true 
      } 
     }); 
    }); 
} 

function initAnimation() { 
    wipeAnimation = new TimelineMax(); 

    $.each(ui.slides, function(i, slide) { 
     wipeAnimation 
      .add(TweenMax.to(slide, 2000, {y: '0'})) 
      .add(TweenMax.fromTo(slide, 5000, {y: '0'}, { 
       y: '-100%', 
       onComplete: function() { 
        if (i < ui.slideCount - 1) { // don't run on last slide 
         updateActiveSlide(ui.slides[i + 1]); // activate next slide 
        } 
       }, 
       onReverseComplete: function() { 
        updateActiveSlide(slide); 
       } 
      })); 
    }); 
} 

function initScene() { 
    scene = new ScrollMagic.Scene({ 
     triggerElement: ui.el, 
     duration: '100%' 
    }) 
    .setTween(wipeAnimation) 
    .setPin(ui.el, { 
     pushFollowers: false 
    }) 
    .addTo(controller); 
}

來源

2016-04-06 Pete

這是默認設計爲停止固定單元重疊的文檔中的以下內容。

你所需要的 'pushFollowers' 屬性設置爲false：

function initScene() { 
    scene = new ScrollMagic.Scene({ 
     triggerElement: ui.el, 
     duration: '100%' 
    }) 
    .setTween(wipeAnimation) 
    .setPin(ui.el, { 
     pushFollowers: false 
    }) 
    .addTo(controller); 
}

查看文檔：http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Scene.html#setPin

// pin element and push all following elements down by the amount of the pin duration. 
scene.setPin("#pin"); 

// pin element and keeping all following elements in their place. The pinned element will move past them. 
scene.setPin("#pin", {pushFollowers: false});

工作例如：https://codepen.io/alexgill/pen/MyOMKP（從codepen分叉）

來源

2016-04-06 16:05:06

嘿亞歷克斯，謝謝花時間回覆。您的分叉codepen似乎與我在OP中鏈接的第一個相同：https：//codepen.io/pete-naish/pen/wGPZPb。我希望能夠在第三張幻燈片向上翻頁之後獲得內容，就好像它連接到幻燈片的底部，而不是位於底層，並且簡單地顯示出來。那有意義嗎？ – Pete

@Pete我明白你的意思了。你有沒有想過使用視差，因爲你可能會得到類似的效果？ –

ScrollMagic引腳間隔太大

回答

相關問題