javascript - 如何使用类似于 chart.io 和 simple.com 的平滑滚动 Pane 创建动画菜单

Question

我正在尝试创建一个 1 页的网站，其顶部有一个菜单，其风格与 chart.io 或 simple.com 类似，有人可以为我指明一个好的教程的方向吗？我已经使用谷歌进行了搜索，但我没有设法想出任何可以做我正在尝试做的事情的东西。

我目前使用 Mootools smooth scroll 进行滚动，但是我在为菜单项下的元素设置动画时遇到了问题。

非常感谢任何帮助...

Answer 1

开始使用 CSS 修复标题菜单:

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

然后你可以使用像这样的 Mootools 插件:

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

如您所见，使用此插件您可以轻松获取滚动位置，因此您可以将三 Angular 形放在菜单下的正确位置。

要为三 Angular 形设置动画，您只需要一些基本的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，这会将三 Angular 形平滑地从其当前位置移动到距左侧 300px 的位置:

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

希望对您有所帮助!