ページアンカーで動くJavascript/CSS矢印

Question

私はこのウェブサイトの要素を調べてみましたが、別のページアンカーをクリックしたときにCSSの三角形がどのように異なるナビゲーション要素に移動するのか把握できませんでした。

参照サイト：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（NavSimple）を（カスタマイズして縮小した）https://www.simple.com/js/brawndo.min2175719530.jsで変更します。

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

そして、それは基本的にあります：ナビゲーションを行うには、より一般的なNavSimpleコードは、アクティブナビゲーション要素（矢印は22個のピクセルの幅であるので、それが11個のピクセルを引いています）の途中を矢印の左の位置を移動するカスタムJavascriptをトリガーします使い方。ニースサイトは、非常にうまく設計されて、私は言うだろう。 （矢印は実際には文字「V」を含むdivなので、背景画像が読み込まれなくてもまだ矢印のように見えますが、素敵なタッチだと思いました）

私はこの質問が生き残るためにはあまりにも具体的ではないかもしれないと思います...

Answer 2

私はそれだけで三角形をアニメーション化するJavaScriptです賭けるだろう、あなたはおそらく、純粋なCSSでこれを行うことができませんでした。

Answer 3

ページが指定されたコンテンツにスクロールされるまで三角形が動くようには見えません。 window.scrollYの値を使用して、三角形がどのボタンに移動するかを評価することができます。

私は、三角形のアニメーションは、window.onscrollイベントの両方で呼び出される関数によって行われると思います。また、ボタンによってトリガーされるスクロールアニメーション機能へのコールバックによって。

Answer 4

ええ、そのサイトでは非常にクールなことが起こっています。そのすべてのCSSの移行、私はAdobe EdgeやLESSのようなものを使用することを期待しています。

brawdndo.jsが離れて（ノ・ムヒョン）成長-入力ここ

デモここhttp://www.ohloh.net/p/moo-growing-input

ソースhttps://github.com/3n/moo-growing-input