Javascript / CSS стрелки, которые движутся с якорями страниц?

Question

Я попытался проверить элементы этого веб-сайта, но не мог понять, как они заставили треугольник CSS перемещаться к различным элементам навигации при нажатии на привязку другой страницы.

См. Веб-сайт: www.simple.com

Answer 1

Стрелка - это спрайт CSS, содержащийся в http://simple.com/img/sprites.png.Это настроено в CSS с переходами следующим образом:

#main-nav #nav-arrow {
    -webkit-transition: left opacity;
    -moz-transition: left opacity;
    -o-transition: left opacity;
    transition: left opacity;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    width: 22px;
    height: 14px;
    position: absolute;
    top: 60px;
    text-indent: -10000px;
    background: url("/img/sprites.png") no-repeat -577px -52px
}

Это делает анимацию, когда свойство left CSS изменяется.Свойство left изменяется Javascript, подключенным из главной библиотеки навигации, которая управляет сайтом, NavSimple , в (настроенном и свернутом) https://www.simple.com/js/brawndo.min2175719530.js.Более общий код NavSimple для навигации также запускает пользовательский Javascript, который перемещает левую позицию стрелки на половину вдоль активного элемента навигации (он вычитает одиннадцать пикселей, потому что стрелка имеет ширину 22 пикселя):

this.nav_arrow.setStyle("left",d.getPosition(this.nav_wrapper).x+(d.getWidth()/2-11))}

Иэто в основном, как это работает.Хороший сайт, очень хорошо проработанный, я бы сказал.(На самом деле навигационная стрелка - это div, содержащая букву "V", поэтому она все равно будет выглядеть как стрелка, даже если фоновые изображения не загружаются, что, как мне показалось, было приятным штрихом.)

Сказав все это, я думаю, что этот вопрос может быть слишком конкретным, чтобы выжить ...

Answer 2

Да, на этом сайте происходит что-то очень интересное.Это все переходы CSS, я бы ожидал использовать Adobe Edge или LESS с чем-то в этом роде.

Кажется, что brawdndo.js не относится к демонстрации moo-grow-input

здесь http://www.ohloh.net/p/moo-growing-input

источник здесь https://github.com/3n/moo-growing-input

Answer 3

Не похоже, что треугольник перемещается, пока страница не будет прокручена до указанного содержимого.Вы можете использовать значение window.scrollY, чтобы определить, к какой кнопке должен двигаться треугольник.

Я предполагаю, что анимация для треугольника выполняется функцией, которая вызывается при событии window.onscroll.И путем обратного вызова функции прокрутки анимации, запускаемой кнопками.

Answer 4

Держу пари, что это JavaScript, просто анимирующий треугольник, вы не могли бы сделать это в чистом CSS.