Scrollmagic顯示和刪除針對div條目

我一直在玩Scrollmagic，並設法得到一些工作。我現在想要做的是在視口底部爲我的博客創建一個粘性社交分享欄。我已經沒有問題，設法得到它與我的代碼Scrollmagic顯示和刪除針對div條目

// Sticky Share Bar 
    var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5, 
     { bottom:-50}, 
     { bottom:0 } 

); 

var share = new ScrollMagic.Scene({ 
     triggerElement: '.entry', 
     offset:60, 
    }) 
    .setTween(stickyShareAnimation) 
    .setPin('.share-bar') 
    .addIndicators() 
    .addTo(controller)

這是HTML

<section class="share-bar"> 
     <div id="share-container" class="container"> 
      <div class="row"> 
       <div class="col-md-12">This is the content</div> 
      </div> 
     </div> 
    </section> 
    <section class="blog-content"> 
     <div class="container"> 
      <div class="row"> 
       <article class="single-post"> 
        <div class="entry"> 
         <?php the_content();?> 
        </div> 
       </article> 
      </div> 
     </div> 
    </section> 
    <section class="Test"> 
    Where I want sharebar to tweenout. 
    </section>

我知道我可以淡出sharebar與另一Tweenmax動畫靶向的「部分顯示測試「，但認爲有可能是一個更好的方式來做到這一點與我最初的JavaScript。是否有另一種方式，或者我需要創建一個單獨的補間，用於分享欄在內容（div.entry）完成後隱藏。

Codepen http://codepen.io/anon/pen/aOWBQZ

來源

2015-06-05 Phrosty30

你可以發佈相關的CSS嗎？你的JS似乎也不完整，即'controller'似乎沒有被定義？如果您只需簡單地創建一個帶有虛擬內容的jsFiddle或Codepen演示程序，那將非常好。可能？ –

我有的代碼正在工作只是想看看是否有一個選項，然後創建一個新的動畫/場景。我已經添加了一個codepen，以便獲得一般概念。當我進入下一部分（測試）時，我想讓分享欄淡入當我滾動div.entry然後淡出.out。 – Phrosty30

如果你想scrollbound動畫（場景持續時間> 0），那麼是的，你應該在動畫標題創建一個場景，一個一遍動畫出來。

如果您想使用ScrollMagic的setTween方法觸發動畫併爲同一屬性設置動畫效果（即不透明度，淡入淡出時），則會出現與屬性覆蓋有關的問題。

詳情請看這裏：https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another

注意：維基是爲ScrollMagic 1.3編寫的，但同樣的原則也適用。

推薦的解決方案是這樣的（更新了ScrollMagic 2.X）： http://jsfiddle.net/xk22Lx50/

但更簡單的解決方案可能是定義一個CSS類，並使用setClassToggle添加或刪除其一定的時間。動畫可以使用CSS動畫來實現。見：http://scrollmagic.io/examples/basic/class_toggles.html

還有一兩件事：如果你的固定元素總是固定（如你的例子），只是動畫或縮小，但從來都不是DOM流的一部分，沒有理由讓它粘性（即使用ScrollMagic的引腳功能）。
只需將它設置爲position: fixed在CSS中，你就完成了。

您仍然可以使用ScrollMagic來進行動畫處理和動畫處理，但擁有更少（不必要的）JS代碼。

來源

2015-06-10 12:34:00

Scrollmagic顯示和刪除針對div條目

回答

相關問題