web-dev-qa-db-ja.com

マウスホイールによるスムーズなスクロールの緩和効果

最近このウェブサイトに出会いました http://www.ascensionlatorre.com/home 、マウスホイールのスクロールの仕組みが大好きです。緩和は非常にスムーズです。

Googleで検索しましたが、類似したものは見つかりません。

JQueryを使用してこの効果を再現する方法に関する提案はありますか?

39
idbranding

私も最近この問題に出くわしましたが、それに対する多くのサポートを見つけることができなかったので、すぐに問題を忘れました。数か月後、スムーズなスクロールのより良い例を見たので、使用しているJavaScriptファイルを調べてみたところ、NiceScrollというjQueryファイルを使用していることがわかりました。

IOSのスクロールのように、これがdiv、iframeなどのシンプルでスムーズなスクロールの両方を求めていると信じています。

http://areaaperta.com/nicescroll/

24
Dylan

http://areaaperta.com/nicescroll/

これは間違いなくチェックするスクリプトです。カスタムスクロールバーが追加されますが、CSSで編集できる見栄えの良いものです。

[〜#〜] edit [〜#〜]動作するデモがありましたが、ホスティングとドメインの変更により削除されました。申し訳ありません。

8
hellojebus

わかりました、私はいくつかの資料であなたのリクエストを支援してみます。私はこのチュートリアルを自分で見つけました。あなたにも役立つことを願っています。これは、参照しているサイトの基本を形成します。 http://johnpolacek.github.com/scrollorama/

http://johnpolacek.github.com/scrolldeck.js/

6
Panshul

あなたが尋ねたのと同じ質問があります。あなたが提供したウェブサイトにアクセスして、答えを見つけました!

彼らはjquery.mousewheel.jsを使用し、Chromeのコンソールを使用してスクリプトを見つけることができます。 「マウスホイール」を検索するだけで、「スクロール」という機能を見つけることができます。スムーズなスクロールの理由は、jqueryのアニメーションを使用せず、javascriptのsetInternalを使用して作成したためです。コードから学ぶことができます。

私はあなたがそれを作ることができると信じています。

5
Winters

私はコードに飛び込みませんでしたが、CSS3トランジションを使用していると思われます。

transition: all 1s

エレメント(もちろんプレフィックスが付いているベンダー)で、視差効果からアニメーションをスムーズにします。

彼らはscrollWheelの動作をオーバーライドし、各ティックが決められた量だけページを下っていったようです。それが私が少なくともこれにアプローチする方法です。

2
eighteyes