How to try to add sticky effect to your CSS

Written in front

I don’t know who first discovered that filter:blur and filter:contrast can produce such a wonderful chemical reaction, but it doesn’t matter. What’s important is that if you learn how to use this special effect, you can add cool effects to your web pages! Then please take a look at two small demos

demo

How to do it?

If you look closely, the elements on the web page seem to have viscosity. When the elements are close enough, a fusion effect will occur. When the elements are far away, there will be a sticky effect. How is this achieved?

It's very simple. You just need to add filter:blur to the child element and increase the contrast on its parent element.

They look like this (a simpler demo is shown below):

Code part:

 <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);
       }
   }

You can always copy the code and try it yourself!

principle:

When elements all have the blur attribute, the upper one is the parent without contrast (hereinafter referred to as Figure 1), and the lower one is the parent with contrast (hereinafter referred to as Figure 2). When the elements are merged, did you find that Figure 1 also has a fusion effect in it! It's just not clear, which is caused by blur. The contrast attribute can effectively combat blur and achieve the effect shown in Figure 2.

See the figure below

This is the end of this article about trying to add a sticky effect to your CSS. For more relevant CSS sticky content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!