Как создать анимированное меню с панелью плавной прокрутки, аналогичной chart.io и simple.com

Question

Я пытаюсь создать 1-страничный веб-сайт с меню в верхней части в стиле, аналогичном chart.io или simple.com, кто-нибудь может указать мне направление хорошего учебника? Я искал с помощью Google, но мне не удалось найти ничего похожего на то, что я пытаюсь сделать.

У меня в данный момент есть плавная прокрутка 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 для анимации, это будет плавно перемещать треугольник из его текущей позиции в 300px слева:

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

Надеюсь, это поможет вам!