CSSにスティッキー効果を追加する方法

CSSにスティッキー効果を追加する方法

前面に書かれた

filter:blur と filter:contrast がこのような素晴らしい化学反応を生み出すことを最初に発見したのは誰かはわかりませんが、それは問題ではありません。重要なのは、この特殊効果の使い方を学べば、Web ページにクールな効果を追加できるということです。 それでは、2つの小さなデモをご覧ください

デモ

どうやってやるんですか?

よく見ると、Web ページ上の要素には粘性があるように見えます。要素が十分近い場合、融合効果が発生します。要素が離れている場合、粘着効果が発生します。これはどのように実現されるのでしょうか。

とても簡単です。子要素に filter:blur を追加し、親要素のコントラストを上げるだけです。

次のようになります (より簡単なデモを以下に示します)。

コード部分:

 <div class="wrapper">
        <div class="コンテナ">
            <div class="box"></div>
        </div>
       </div>
 .ラッパー{
            幅: 100%;
            高さ:100vh;
            位置: 絶対;
            背景色: #333;
            フィルター:コントラスト(50)
        }
        。容器 {
            位置: 絶対;
            上位:50%;
            残り:50%;
            幅: 200ピクセル;
            高さ: 100px;
            背景色: #00eeff;
            フィルター: ぼかし(10px) ;
        } 
        。箱{
            幅:25px;
            高さ:25px;
            背景色: #00eeff;
            境界線の半径: 50%;
            位置: 絶対;
            残り:50%;
            遷移: 1秒;
            フィルター: ぼかし(1px);
            アニメーション: 1 秒の線形無限移動。
         }
   @keyframes 移動 {
       0%{
           変換: translateY(0);
       }
       100%{
           変換: translateY(-100px);
       }
   }

いつでもコードをコピーして自分で試すことができます。

原理:

全ての要素がぼかし属性を持つ場合、上側がコントラストのない親(以下、図1)、下側がコントラストのある親(以下、図2)になります。要素を結合すると、図1にも融合効果が現れているのがお分かりいただけたでしょうか。ぼやけが原因で、画像がはっきりしないのです。コントラスト属性はぼやけを効果的に抑え、図 2 に示すような効果を実現します。

下の図をご覧ください

CSS にスティッキー効果を追加する方法についての記事はこれで終わりです。CSS スティッキーに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  タブバーのいくつかの実装方法(推奨)

>>:  画像をハイパーリンクとして使用したときに表示される青いボックスを削除する方法

推薦する

ウェブフロントエンド開発の細部

1 選択タグは閉じられている必要があります <select></select>...

Linuxコマンドunzipの詳しい説明

目次1. 解凍コマンド1.1 構文1.2 オプション2. 例1. 解凍コマンドunzip コマンドは...

Linuxカーネルで中国語の文字を出力する方法

次のように、Windows/MacOS からログインした Linux の SSH ターミナルで簡単に...

MySQLトリガーの詳細な説明と簡単な例

MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...

Docker Desktop で rocketmq をインストールするための非常に詳細なチュートリアル

Dockerデスクトップをインストールするダウンロード先: Docker Desktop for M...

Linux で PyCurl のエラーを解決する方法

「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...

CSS3の新しいセレクタの例

構造(位置)擬似クラスセレクタ(CSS3) :first-child : 指定されたセレクタは、親要...

Vueがビデオアップロード機能を実装

この記事では、参考までに、ビデオアップロード機能を実現するためのVueの具体的なコードを紹介します。...

canvas.toDataURL image/png エラー処理方法の推奨

問題の背景:再生中のビデオのスクリーンショットを撮る必要があります。ビデオはビデオタグを使用して再生...

Vueはアコーディオン効果を実装する

この記事の例では、アコーディオン効果を実現するためのVueの具体的なコードを参考までに共有しています...

DockerはPruneコマンドを使用してnoneイメージをクリーンアップします

目次無イメージの創造と混乱Noneオブジェクトをクリーンアップする方法トリムミラーコンテナで使用され...

Nginx を使用してグレースケール リリースを実装する

グレースケールリリースとは、白と黒をスムーズに移行できるリリース方法を指します。 ABテストとは、グ...

Dockerデータ管理とネットワーク通信の使用

Docker をインストールし、Docker コアとインストールを通じて簡単な操作を実行できます。 ...

MySQL分離の使用手順を読む

現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...