最近このウェブサイトに出会いました http://www.ascensionlatorre.com/home 、マウスホイールのスクロールの仕組みが大好きです。緩和は非常にスムーズです。
Googleで検索しましたが、類似したものは見つかりません。
JQueryを使用してこの効果を再現する方法に関する提案はありますか?
私も最近この問題に出くわしましたが、それに対する多くのサポートを見つけることができなかったので、すぐに問題を忘れました。数か月後、スムーズなスクロールのより良い例を見たので、使用しているJavaScriptファイルを調べてみたところ、NiceScrollというjQueryファイルを使用していることがわかりました。
IOSのスクロールのように、これがdiv、iframeなどのシンプルでスムーズなスクロールの両方を求めていると信じています。
http://areaaperta.com/nicescroll/
これは間違いなくチェックするスクリプトです。カスタムスクロールバーが追加されますが、CSSで編集できる見栄えの良いものです。
[〜#〜] edit [〜#〜]動作するデモがありましたが、ホスティングとドメインの変更により削除されました。申し訳ありません。
わかりました、私はいくつかの資料であなたのリクエストを支援してみます。私はこのチュートリアルを自分で見つけました。あなたにも役立つことを願っています。これは、参照しているサイトの基本を形成します。 http://johnpolacek.github.com/scrollorama/
あなたが尋ねたのと同じ質問があります。あなたが提供したウェブサイトにアクセスして、答えを見つけました!
彼らはjquery.mousewheel.jsを使用し、Chromeのコンソールを使用してスクリプトを見つけることができます。 「マウスホイール」を検索するだけで、「スクロール」という機能を見つけることができます。スムーズなスクロールの理由は、jqueryのアニメーションを使用せず、javascriptのsetInternalを使用して作成したためです。コードから学ぶことができます。
私はあなたがそれを作ることができると信じています。
私はコードに飛び込みませんでしたが、CSS3トランジションを使用していると思われます。
transition: all 1s
エレメント(もちろんプレフィックスが付いているベンダー)で、視差効果からアニメーションをスムーズにします。
彼らはscrollWheelの動作をオーバーライドし、各ティックが決められた量だけページを下っていったようです。それが私が少なくともこれにアプローチする方法です。