0

私はこのようなことをしようとしています。ここでこの回答のコードを使用していますが、回答が完全に明確になることはありません。ここでこの jquery プラグインを使用することをお勧めしますが、私はそれを機能させることができませんでした。私は最初の例のコードを使用しますが、私は Foundation 4 を使用しており、プログレス バーは Foundation 4 に付属しており、簡単に作成できます。また、2 番目の例で提供されているアニメーション コードは非常に簡潔です。全体として、最初の例はやや乱雑で、コードが重く、冗長です。

私のコードはここで公開されています。私はaboutセクションのスキルバーを扱っています。ユーザーがこの時点に到達する前に、アニメーションを一時停止する必要があります。ユーザーがページのこの部分までスクロールすると、アニメーションが再生されます。

編集: また、ページをスケーリングするときにバーがコンテナーから「壊れる」のを防ぐための提案があれば (このサイトはレスポンシブであることを意図しています)、それも感謝します。

EDIT2:これで遊んでいると、overflow: hidden; であることに気付きました。on .progress は私の「破壊的な」問題を修正します..ただし、ウィンドウのサイズを変更すると、サイズは初期化されたままになります。現実的には、私のサイトにアクセスするユーザーがウィンドウのサイズを大きく変更することはないでしょうが、それを見ている雇用主にとっては、それが適切に機能しない場合はちょっと不便です. 最初のサイズで初期化され、その後オーバーレイのサイズが変更されない、不機嫌そうな猫のボタンオーバーレイでも同じ問題が発生しています。これに対する提案は本当に、本当に感謝しています!

4

1 に答える 1

0

スキルバーがどこにあり、画面がどこにあるかがわかっている場合は、javascript だけが必要です。（プラグインや奇妙なものはありません）

画面の垂直位置を取得するのは簡単です：

 window.pageYOffset

divの垂直位置を取得するには、必要です

 div.offsetTop

あなたの場合、すべてのスキルバーをラップしてループを設定する div に id を与えます (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) div の範囲内にいるかどうかを確認します (たとえば、ウィンドウ オフセットと div の差がある程度未満かどうか)。

答えが「はい」の場合、アニメーションをトリガーします。

アニメーションを行う最良の方法は、css 遷移によるものです。(CSS アニメーションの紹介が必要な場合は、こちらのビデオが参考になります: http://www.youtube.com/watch?v=VoncDvOfUkk )

JavaScript から CSS アニメーションを設定できます。

アイデアは、すべての「メーター」幅を 0 に設定することです。次に、javascript で次のようにします。

 div.style.transition = "width 1s";
 div.style.width = someValue;

値を div に含めることをお勧めします。em や px ではなく % のように、「進行状況」の div の一部を一定にすることをお勧めします。このテクニックはうまくいくはずです。(まだ問題がある場合は、window.requestAnimationFrame ループが進行しているため、各タイムステップで値を再計算できます... ただし、パフォーマンスに注意してください)。

jQuery が推奨された理由は、アニメーション化するためにすべての div を更新する必要がある場合、 $(this).find('.meter') を記述してから addClass('.expand') を記述するだけだからです。とても簡単です。

お役に立てれば

于 2013-10-13T02:54:58.073 に答える