2015-02-09 52 views
0

我在理解數據錨目標我想問題,或者沒有做什麼,我想數據錨目標和skrollr菜單

我有一大堆的場面都具有相同的背景,我的pano元素。

<div id="pano" 
    data--0p-top="top:0%; opacity:1; transform: scale(1);" 
    data--200p-top="top:13%; opacity:0.5; transform: scale(2);" 
    data--620p-top="top: 20%; transform: scale(3);" 
    data--1000p-top="top:-100%; opacity:0.2; scale(4);"> 
</div> 

<div id="scene1" 
    data-anchor-target="#pano" 
    data--50p-top="opacity:0.3; top: 20%; left: 5%; transform: scale(0);" 
    data--100p-top="opacity:1; transform: scale(1); top: 10%; left:30%;" 
    data--150p-top="opacity:0; transform: scale(1.5); top: -10%; left:60%;"> 
    <div class="cloud1"></div> 
</div> 

<div id="scene2" class="scene-text" 
    data-anchor-target="#scene1" 
    data--130p-top="transform: scale(0); opacity: 0.5; top: 27%;" 
    data--150p-top="transform: scale(1); opacity: 1; top: 27%;" 
    data--200p-top="transform: scale(1.2);" 
    data--230p-top="transform: scale(3); opacity: 0;"> 
    <div class="content"> 
     <h2>Text</h2> 
     <p>This is a excerpt telling a story.</p> 
    </div> 
</div> 

據我瞭解scene2的數據標籤應取決於從scene1?但現在他們仍然像pano一樣依賴頂部?


我的另一個問題是,當我嘗試實施skrollr menu在此設置來alloq錨幾乎不能滾動,即使我把一個元素在最後做出一個錨,隨時隨地每個場景。我也嘗試設置data-menu-top到我想要鏈接去的場景。

我的鏈路測試: <a href="#scene2" data-menu-top="700">Passenger Portal</a>只滾動到頁面頂部有一點偏移。改變data-menu-top的值什麼也不做。

這是我的開始(我有jQuery的包括OFC)

<script> 
    var s = skrollr.init({ 
     smoothScrolling: true 
     /*render: function (data) { 
      //Log the current scroll position. 
      console.log(data.curTop); 
     }*/ 
    }); 

    skrollr.menu.init(s, { 
     animate: true, 

     //The easing function to use. 
     easing: 'sqrt', 

     //Multiply your data-[offset] values so they match those set in skrollr.init 
     scale: 2, 

     //How long the animation should take in ms. 
     duration: function (currentTop, targetTop) { 
      //By default, the duration is hardcoded at 500ms. 
      return 500; 

      //But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`). 
      //return Math.abs(currentTop - targetTop) * 10; 
     }, 

     //If you pass a handleLink function you'll disable `data-menu-top` and `data-menu-offset`. 
     //You are in control where skrollr will scroll to. You get the clicked link as a parameter and are expected to return a number. 
     handleLink: function (link) { 
      return 400;//Hardcoding 400 doesn't make much sense. 
     }, 

     //By default skrollr-menu will only react to links whose href attribute contains a hash and nothing more, e.g. `href="#foo"`. 
     //If you enable `complexLinks`, skrollr-menu also reacts to absolute and relative URLs which have a hash part. 
     //The following will all work (if the user is on the correct page): 
     //http://example.com/currentPage/#foo 
     //http://example.com/currentDir/currentPage.html?foo=bar#foo 
     ///?foo=bar#foo 
     complexLinks: false, 

     //This event is triggered right before we jump/animate to a new hash. 
     change: function (newHash, newTopPosition) { 
      //Do stuff 
     } 
    }); 
</script> 

回答

0

我有skrollr菜單僅下降部分的方式同樣的問題。刪除這條線從開始腳本允許它滾動一路任何錨鏈接,我想:

 handleLink: function (link) { 
 
      return 400;//Hardcoding 400 doesn't make much sense. 
 
     },

+0

Intresting!我本來希望嘗試它,但我實際上報廢了所有內容,並從頭開始使用scrollMagic。對於任何閱讀此內容並試圖製作「高級」動畫(同時發生多件事)的人,我強烈建議使用scrollMagic。如果你甚至知道一個小的JavaScript,它將是100倍更多的可定製和動態! – Cammy 2015-03-30 08:35:11