純粋な CSS を使用して進行状況バーのスクロール効果を実現するためのいくつかのテクニックの詳細な説明

この記事では、驚くべき純粋な CSS スクロール プログレス バー効果をいくつか紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

最初の質問は、CSS を使用して次のスクロール バー効果を実現する方法です。

は上部にある黄色のスクロール進行状況バーで、ページがスクロールするにつれて長さが変化します。

以下を読み続ける前に、少し時間を取ってください。 JS を使用せずに上記の効果を賢く実現できるかどうか、上記の効果について考えたり、自分で試してみたりしてください。

OK、続けてください。この影響は、私が事業開発の過程で遭遇した同様の小さな問題です。実際、JavaScript を使ってみても、最初は「めんどくさい」という感想を持ちます。それで、私はずっと疑問に思っていましたが、CSSだけを使用してこの効果を達成することは可能でしょうか？

要件の分析

このエフェクトを最初に見たとき、次のスクロール アニメーションを CSS だけで完成させるのは不可能だと感じました。ページのスクロール距離。

CSS のみを使用してそれを実現したい場合は、別の方法を見つけて、いくつかのトリッキーな方法を使用するしかありません。

それでは、いくつかのトリックを使用して、CSS を使用してこの効果を段階的に実現してみましょう。難しさを分析します:

• ユーザーの現在のスクロール ページの距離を知り、上部の進行状況バーに通知する方法は?

通常の分析はこうあるべきですが、これは従来の考え方に陥ります。プログレスバーは単なるプログレスバーであり、ページのスクロール距離を受け取り、幅を変更します。ページのスクロールと進行状況バーが一体になったらどうなるでしょうか?

要件の達成

早速、Linear Gradient を使用してこの機能を実現してみましょう。

ページが で囲まれているとします。本文全体はスクロールできます。それに、左下隅から右上隅への線形グラデーションを追加します。

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

すると、次のような効果が得られます。

##おお、黄色のブロックの色の変化は、実際に全体の進行状況を表現できます。 。実際、賢い学生はもうすでに次に何をすべきかを知っているはずです。

疑似要素を使用して余分な部分をカバーします:

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

デモンストレーションの便宜上、上の白い背景を黒い透明な背景に変更しました:

実際の効果は次のとおりです:

鋭い目の生徒は次のように感じるかもしれません。この後、一番下にスライドすると、プログレスバーが一番下に到達しませんでした:

理由は、## の線形グラデーションのためです。 #body

高さはボディ全体のサイズを設定します。グラデーションの高さを調整しましょう: <pre class="brush:css;toolbar:false;">body { background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; }</pre>ここでは、

calc

を使用して計算を実行し、100vh を減算します。 、つまり、画面の高さまで Go を減算し、下にスライドしたときにグラデーションが右上隅にちょうど収まるようにします。 そして

5px

はスクロール進行状況バーの高さであり、高さは 5px のままです。もう一度エフェクトを見てください、完璧です:

この時点で、この要件は完全に実現されており、これは良いちょっとしたトリックです。完全なデモ:

CodePen デモ -- 線形グラデーションを使用してスクロール進行状況バーを実装する

私は通常、他のものに従います。 「もう書き方がわかりません。このテクニックは昔見たことがあります。たまたま昼に仕事でこのテクニックを使ったので、誰が最初にこのテクニックを発明したかを調べずにこの記事を書きました。」同様の記事があるかどうかはわかりませんので、次の記事も参照してください:

W3C -- Scroll Indicator の純粋な CSS 実装

最後に

実は、これは非常に素晴らしい グラデーション 非常に小さなテクニックです。これまで考えたこともなかった、もっと興味深い CSS については、ここに来てご覧ください:

CSS インスピレーション -- CSS インスピレーション

さて、この記事は終わりですここで、お役に立てば幸いです:)

元のアドレス: https://segmentfault.com/a/1190000017830427

著者: chokcoco

詳細プログラミング関連の知識については、プログラミング ビデオ をご覧ください。 ！

以上が純粋な CSS を使用して進行状況バーのスクロール効果を実現するためのいくつかのテクニックの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。