11

私はこのようなウェブサイトを設定しています（ほとんど垂直スライドショー）：

http://mikelegacywebdesign.com/scrollpage_test/index.html

私が理解しようとしていることの 1 つは、スクロール中に色が変化するポイントまでスクロール SNAP を作成する方法です。

たとえば、スクロールすると、スクロールしている次の色の上部近くに約 50 ～ 100 ピクセルが表示されます。スクロールが難しいため、スクロールを続けるのではなく、そのポイントにスナップするとよいでしょう。その「フレーム」を完全に揃えます。シーケンス内の前または次のフレームの一部ではなく、完全なフレームを表示するように完全にスクロールするかどうかは、ユーザー次第です。

jQuery プラグインなどがあるかどうかを知っている人なら誰でも、私のヒーローです。

これまでの全ページです。現在の効果を取得するのは簡単なコーディングです。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>

<style type="text/css">

    html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
    .container { height: 400%; width: 100%; }
    .section { height: 35%; width: 100%; }

    #section1 { background-color: #1d9ad7; }
    #section2 { background-color: #c83e3d; }
    #section3 { background-color: #75b946; }
    #section4 { background-color: #f4be2f; }

</style>
</head>
<body>
<div class="container">
    <div class="section" id="section1"></div>
    <div class="section" id="section2"></div>
    <div class="section" id="section3"></div>
    <div class="section" id="section4"></div>
</div>
</body>
</html>
4

3 に答える 3

5

はい、可能です。ただし、彼らのコードは非常にひどいものです。アニメーション中scrollTopは、通常はスクロールにつながる追加のユーザー入力が無視されるようにする必要があります。このテストケースを見て、ユーザーがスクロールできないようにする方法を理解してください。

于 2012-06-27T19:40:33.673 に答える
2

を使用して目的の効果を得ることができます

scroll() jumpScroll() scrollBy()

独自のコードを少し追加します。

例えば、

function jumpScroll() {
    window.scroll(0,250);
}

ページ上のそのポイントまでスクロールします

于 2012-06-27T19:40:44.367 に答える
0

私は同じことを求めていたので、数週間前に同様の質問をしました。機能を備えたstellar.jsというアドオンを見つけましたが、デモは横向きで、一生縦向きに変更できませんでした。とにかく、誰かがソリューションを投稿しました。これは、クリックではなくマウススクロール用に編集しました: http://jsfiddle.net/djsbaker/dxzk4/

サイト ノートでは、巨大な固定背景画像でかなり遅延するという問題がありました。実際には非常にラグがありましたが、うまく混ざらない視差を使用していました。

于 2012-06-27T19:35:00.737 に答える