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

Posted 2023-02-16

【中文标题】如何使用类似于 chart.io 和 simple.com 的平滑滚动窗格创建动画菜单

【英文标题】：How to create an animated menu, with smoothscroll pane similar to chart.io and simple.com

【发布时间】：2011-12-20 01:08:09

【问题描述】：

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

我目前使用 Mootools 平滑滚动来进行滚动，但是我无法为菜单项下的元素设置动画。

非常感谢任何和所有帮助...

【参考方案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" >
    </div>
</div>

CSS：

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

Mootools tween 用于动画，这会将三角形从当前位置平滑地移动到距离左侧 300 像素的位置：

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

希望对您有所帮助！

【讨论】：

您的 cmets 允许我在昨天晚上执行此操作。谢谢