如何創建一個動畫菜單，平滑滾動窗格類似於chart.io和simple.com

Question

我正在嘗試創建一個1頁面的網站，它有一個類似於chart.io或簡單樣式的菜單。 com，任何人都可以向我指出一個好的教程的方向嗎？我使用谷歌搜索，但我沒有設法做出任何事情，像我想做的事情。

我目前有Mootools平滑滾動做滾動，但我無法動畫菜單項下的元素。

任何及所有幫助是極大的讚賞...

Answer 1

開始製作使用CSS固定的標題菜單：

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

然後你可以使用一個MooTools的插件，像這樣的：

http://davidwalsh.name/mootools-scrollspy
演示：http://davidwalsh.name/dw-content/scroll-spy.php?page=3

正如您所看到的，使用此插件可以輕鬆獲取滾動位置，因此您可以將三角形放置在菜單下的正確位置。

要爲三角形制作動畫，您只需要一些基本的動畫即tween。 HTML將是這樣的：

<div id="header"> 
    Your header here 
    <div id="triangle"> 
     <img src="triangle.png" alt=""> 
    </div> 
</div> 

CSS：

#header #triangle { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

Mootools的tween動畫，這會從左側平滑地從它的當前位置移動的三角形300像素：

$('triangle').tween('left', 300); 

希望這會幫助你！