Question

我尝试检查这个网站的元素，但是当我点击不同的页面锚点时，我无法弄清楚他们如何让CSS三角形移动到不同的nav元素。

请参阅网站：www.simple.com

Answer 1

箭头是http://simple.com/img/sprites.png中包含的CSS精灵。它在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
}

当CSS的left属性发生变化时，它会动画。 left属性由在主导航库中挂钩的Javascript更改，该导航库在（自定义和缩小的）https://www.simple.com/js/brawndo.min2175719530.js中驱动网站NavSimple。用于导航的更通用的NavSimple代码还会触发自定义Javascript，将箭头的左侧位置移动到活动导航元素的中间位置（因为箭头宽度为22像素，所以减去11个像素）：

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

这基本上就是它的运作方式。不错的网站，非常精心设计，我会说。（导航箭头实际上是一个包含字母“V”的div，所以即使背景图像没有加载，它仍然看起来像箭头，我认为这是一个不错的触摸。）

说了这么多，我认为这个问题可能有点过于具体而无法生存......

Answer 2

在页面滚动到指定内容之前，三角形似乎不会移动。您可以使用window.scrollY值来评估三角形应移动到哪个按钮。

我猜三角形的动画是由一个在window.onscroll事件中调用的函数完成的。并通过回调按钮触发的滚动动画功能。

Answer 3

是的，那个网站上有一些非常酷的东西。它的所有CSS转换，我希望使用Adobe Edge或LESS这样的东西。

brawdndo.js似乎是moo-growing-input

的一部分

演示http://www.ohloh.net/p/moo-growing-input

来源https://github.com/3n/moo-growing-input

Answer 4

我敢打赌它只是动画三角形的JavaScript，你不可能在纯CSS中做到这一点。

与页面锚点一起移动的Javascript / CSS箭头？

4 个答案: