web-dev-qa-db-ja.com

Javascript-マウスホイールによるスムーズな視差スクロール

視差効果を適用しているページがあります。これは、translate3dを使用して実現されます。さて、これはうまく機能しますが、マウスホイールでスクロールするときにデフォルトの「ステップ」をオーバーライドする方法を疑問に思っていますか？

スクロールバーでスクロールすると、すべてがうまくいきます。しかし、マウスホイールを使用すると、すべてがびくびくします。

私はこれをかなり簡単な方法でやっています：

    var prefix = Modernizr.prefixed('transform');
    $window.on('scroll', function(){
        var scroll_top = $window.scrollTop();
        if(scroll_top < forside_infographics_offset){
            $_('#slider').css(prefix , "translate3d(0,"+(scroll_top/3)+"px,0)");
        }

    });

スクロールが非常にスムーズで、マウスホイールにステップが付いているこのサイトを見ました。私はコードを見ようとしましたが、彼はrequestAnimationFrameを使用しているようですが、この正確なスクロール効果をどのように達成したかはわかりません。

http://cirkateater.no/

何か案は？

javascriptcssscrollparallaxsmooth-scrolling
17
Kenny Bones

多くの研究を行った後、私は非常に簡単な解決策を見つけました:) http://bassta.bg/demos/smooth-page-scroll/

興味深いことに、既存のコードを変更する必要はまったくありませんでした。これはデフォルトのスクロール動作をオーバーライドしますが、通常のようにイベントを開いたままにしておきます。

19
Kenny Bones

マウスホイールを使用したスクロールには、特別な処理が必要です。各マウスホイールスクロールが特定のピクセル量でコンテンツをスクロールしない理由。各スクロールによりページがジャンプし、その後、背景画像がこれらのジャンプに自分自身を配置しようとするため、ジャンプのたびに「ジャンピー」なジッターアニメーションが発生します。

ライブラリを使用すると、ほとんどの場合問題が解決しますが、内部で解決しようとしている問題を理解する価値もあります。

参考のために、マウスイベントは mousewheel および DOMMouseScroll です

2
pbojinov

この Chrome用プラグイン は、これに必要な機能を提供します。誰かが それの縮小版 でGistを作成しました。それはかなり古いバージョンのものですが、私がチェックしたように、プラグインの最新バージョンはあまりにも多くのものを追加するので、私はそれでいいと思います。

しかし、その要点に関するいくつかのこと：

  • 開始する前に、ブラウザがChromeであるかどうかを確認します。
  • 自動的に開始されます。
  • JQueryを使用します。

そこで、これらの点に対処する version を作成しました。スクリプトを追加し、SmoothScroll.init()を呼び出して開始します。

1
Parziphal

編集：テスト中に、これには重大なバグがあることがわかりました。私のバージョンは（私の意見では）元のコードよりも非常に優れた動作をしますが、残念ながら他の手段（スクロールバー/中央クリックとドラッグ）によるスクロールを考慮していません。これらの方法のいずれかでスクロールしてからマウスホイールでスクロールすると、マウスホイールを最後にスクロールしたときのスクロール位置に戻ります。これに対するソリューションを開発するときに更新します。

Kennyの参照ソリューションは素晴らしいアプローチでしたが、その機能性に夢中になりました。ホイールをすばやくスクロールすると、それほど速くスクロールしません。

マウスホイールの回転速度に関係なく、クリックごとに一定の距離をスクロールするように改善しました。

彼の答えがなかった理由は、最初のアニメーションが完了する前にホイールをもう一度スクロールすると、新しいスクロールの高さは、現在のスクロール高さとホイールクリックごとのスクロールだけであるためです。 （つまり、スクロール時間が0.5秒で、.25秒後に2回スクロールすると、ホイールスクロール距離の2倍ではなく1.5倍スクロールします）

夜遅くです、それが理にかなっていることを望みます。

ここに私のコードがあります：

必要なライブラリ

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

スクロールコード

<script>
    $(function(){   
        var $window = $(window)
        var $scoll = $('#page-container')
        var scrollTime = 0.5
        var scrollDistance = 120

        var scrollTop = $scoll.scrollTop()

        $window.on("mousewheel DOMMouseScroll", function(event){

            event.preventDefault()  

            var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3
            scrollTop = scrollTop - parseInt(delta*scrollDistance)
            scrollTop = Math.max(0, Math.min($scoll[0].scrollHeight, scrollTop))

            TweenMax.to($scoll, scrollTime, {
                scrollTo : { y: scrollTop, autoKill:true },
                    ease: Power1.easeOut,
                    overwrite: 5                            
                })

        })
    })
</script>
0
csga5000

いい質問ですね。

私が使用するライブラリは次のとおりです。 https://github.com/cferdinandi/smooth-scroll

Smoothscroll.jsファイルを含めるだけで、作業は完了です。マウスホイールは、ピクセル単位でジャンプするのではなく、ページを下にスムーズに移動します。

視差ウェブページの見た目を本当に改善します。

ところで、視差画像の場合、このライブラリを使用します。

https://github.com/pederan/Parallax-ImageScroll

Webページに追加するのは本当に簡単です。このライブラリを含めて初期化することを忘れないでください下部 Webページのafter画像とHTML。

（これが違いを生むとは思いませんでしたが、絶対に違います！）

0
Mike Gledhill