1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSSで粘着効果をつけてみる方法

2022-02-02 17:54:23

の前に書く

filter:blurとfilter:contrastがこんなに素晴らしい相性を見せることを誰が最初に発見したのかは知りませんが、そんなことはどうでもよくて、重要なのは、この効果の使い方を覚えれば、あなたのページにクールな効果を加えることができる!ということです。それでは、2つの小さなデモから始めましょう。

デモ

どうやるんですか?

よく見ると、ページ上の要素には粘性があり、要素が近いとなじみ、遠いと張り付くような効果があるように見えますが、これはどのようにして実現しているのでしょうか。

単純に、子要素にfilter:blur、親要素にcontrastを追加すればいいだけです。

これらは次のようになります(その後にもっと簡単なデモの例が続きます)。

コード部分です。

 <div class="wrapper">
        <div class="container">
            <div class="box"></div>
        </div>
       </div>

 .wrapper{
            width: 100%;
            height: 100vh;
            position: absolute;
            background-color: #333;
            filter:contrast(50)
        }
        .container {
            position: absolute;
            top:50%;
            left:50%;
            width: 200px;
            height: 100px;
            background-color: #00eeff;
            filter: blur(10px) ;
        } 
        .box{
            width:25px;
            height:25px;
            background-color: #00eeff;
            border-radius: 50%;
            position: absolute;
            left:50%;
            transition: 1s;
            filter: blur(1px);
            animation: move 1s linear infinite;
         }
   @keyframes move {
       0%{
           transform: translateY(0);
       }
       100%{
           transform: translateY(-100px);
       }
   }

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

原理を説明します。

blur属性を持つ要素の場合、上の親はコントラストがなく(以下1図)、下の親はコントラストがある(以下2図)、その要素を融合すると、1図も融合した効果が入っているのがわかりますね!?ただ、はっきりしないのはぼかしのせいで、contrast属性はぼかし対策と2図の効果を見事に実現しています。

下の画像をご覧ください

今回は、CSSにスティッキー効果を追加してみようという記事です。もっと関連するCSSのスティッキーコンテンツ追加については、スクリプトハウスの過去記事を検索するか、下記の関連記事を引き続きご覧ください。今後ともスクリプトハウスをよろしくお願いします。