2

私はこのプロジェクトに取り組んでおり、視差スクロールを使用して Web サイトを作成しています。1 つの長い 1 ページャーになるはずです。ページを下にスクロールすると、ページの新しいセクションに到達するたびに背景色が変わるはずです。

私は何日もかけてウェブを検索し、ここでもスタックオーバーフローを検索しましたが、希望どおりに機能するものは見つかりませんでした。

私はこのスクリプトをスタックで見つけました：

 var tStart = 100 // Start transition 100px from top
      , tEnd = 500   // End at 500px
      , cStart = [250, 195, 56]  // Gold
      , cEnd = [179, 217, 112]   // Lime
      , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]];

    $(document).ready(function(){
        $(document).scroll(function() {
            var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
            p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
            var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
            $("body").css('background-color', 'rgb(' + cBg.join(',') +')');
        });
    });

http://jsfiddle.net/dtZDZ/12/ここにフィドルがあります

このスクリプトは、色を前後に 1 回だけ変更することを除いて、まさに私が望むことを行います。ページを下にスクロールしているときに、背景色を 4 ～ 5 回変更する必要があります。また、フィドルのように色を変更するときにスムーズに移行したいと思います:)

誰かがこれを手伝ってくれるか、正しい方向に向けてくれることを願っています。

前もって感謝します

4

2 に答える 2

1

css を使用してグラデーションの背景を使用できます。

body {
background-color: linear-gradient(red, blue, green, blue, red)
}

下にスクロールすると、背景が変わります。この方法は少し「チート」ですが、バックグラウンドの最後に到達するとループするので機能します。

于 2015-04-09T09:14:35.227 に答える