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 に示すような効果を実現します。

下の図をご覧ください