To get right to the point, the mouse follows, as the name suggests, the element will follow the mouse movement and make the corresponding movement. Something like this:

In general, CSS takes care of presentation and JavaScript takes care of behavior. The effect of mouse following is a behavior, and is usually implemented with the help of JS.

The point of this article, of course, is to show you how to simulate some mousefollowing behavior animations using CSS without javascript.

The principle of

For example, to use CSS to implement mouse following, the most important thing is:

How to monitor where the current mouse is in real time?

OK, in fact, a lot of CSS effects, are inseparable from the smoke screen two words. To detect where the mouse is, we simply cover the page with elements:

We use 100 elements to cover the entire page, hover’s time to show the color, the core SCSS code is as follows:

<div class="g-container">
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>
  <div class="position"></div>. / / 100</div>
Copy the code
.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.position {
    position: absolute;
    width: 10vw;
    height: 10vh;
}

@for $i from 0 through 100 { 
    
    $x: $i % 10;
    $y: ($i - $x) / 10;
    
    .position:nth-child(#{$i+ {1})top: # {$y * 10}vh;
        left: # {$x * 10}vw;
    }

    .position:nth-child(#{$i + 1}):hover {
        background: rgba(255.155.10.5)}}Copy the code

You can get something like this:

Well, if you remove the hover effect of each element, then this time to operate the page, in fact, there is no effect. But at the same time, through :hover pseudo class, we can probably know the current mouse is in the page which interval.

Moving on, let’s add one more element to the page (the round ball) and position it absolutely in the middle of the page:

<div class="g-ball"></div>
Copy the code
.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(50%, 50%); }Copy the code

Finally, we use ~ brother element selector, in the hover page (actually hover one hundred hidden div), through the current hover to the div, to control the position of the small ball element.

@for $i from 0 through 100{ 
    
    $x: $i % 10;
    $y: ($i - $x) / 10;
    
    .position:nth-child(#{$i + 1}):hover ~ .ball {
        top: # {$y * 10}vh;
        left: # {$x * 10}vw; }}Copy the code

At this point, a simple pure CSS mouse to follow the effect is realized, convenient for everyone to understand, take a look at the following diagram to understand:

The complete DEMO, you can poke here to see: CodePen DEMO – CSS implementation mouse following

Existing problems

From the Demo above, there are still a lot of flaws, such as

The poor accuracy

You can only control the movement of elements into the space of the div, not the exact mouse position, which can be optimized by increasing the number of hidden divs. For example, increase the number of tiled divs from 100 to 1000.

Not smooth enough

The effect doesn’t look silky enough, this may need to be optimized with proper easing functions and proper animation delays.

Dry up!

Well. With that in mind, let’s see what other interesting things we can do with this technique.

CSS mouse following button effect

When I first saw the following effect on CodePen, using SVG + CSS + JS, I wondered if I could copy it using only CSS:

CodePen Demo — Gooey mouse follow

Well, the ideal is full, the reality is skinny. With CSS alone, there are limitations.

  • But we can still use the method described above to achieve mouse following
  • Use CSS filtersfilter: blur() contrast()To simulate element fusion, see this article:CSS filter tips and details you didn’t know

Ok, let’s look at the bankruptcy simulation using just CSS:

It’s a bit too weird. You can slow it down a bit by adjusting the color, the intensity of the filter. , to get a slightly better similar effect:

Demo stamp me, CodePen Demo – CSS mouse follow button effect

Full screen mouse follow animation

OK, go ahead. Let’s do something a little bit fancier. Well, the flashy kind. :sweat_smile:

If we control not just one element, but multiple elements. The transition-delay is used to animate multiple elements. Wow, that’s exciting to think about. Like this:

CodePen Demo – Mouse following animation PURE CSS MAGIC MIX

If we can be a little more imaginative, we can have a little more spark:

This effect is one of my favorite works by Yusuke Nakaya, CodePen, Japan. Source code: Demo — Only CSS: Water Surface

Mouse follow indicator

Of course, you don’t have to tell the element to move. The technique of using divs to capture the current position of an element can also be applied to other effects, such as indicating mouse movement:

  1. The default is to overlay the background divThe transition - duration: 0.5 s
  2. When hover to element background div, change the div to which the current hover is to hovertransition-duration: 0s, and hover when given a background color, so that the current hover to the div will be immediately displayed
  3. When the mouse moves away from the div, the divtransition-durationChange back to the default state, which isThe transition - duration: 0.5 sAt the same time, the background color will disappear. In this way, the background color of the left div will slowly transition to transparent, resulting in the effect of virtual shadow

CodePen Demo — cancle transition

The last

In fact, there are many interesting usage, interested students can do their own, more to try, combination.

I’m often asked if any of these quirks are useful in business. Whether it works or not. Well, in my opinion, maybe it is not really used in business or the application scenarios are extremely limited, but knowing more can make more choices when encountering problems, more space for thinking and better divergent thinking, at least it is harmless.

More interesting CSS that you might not have thought of can be found here:

Css-inspiration — CSS Inspiration

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

Ok, this article is over, hope to help you 🙂

If there are any questions or suggestions, you can communicate more, original article, writing style is limited, talent is shallow, if there is something wrong in the article, hope to inform.