Pure CSS for incredible mouse follow effect

The mouse follow effect, as the name implies, is that the element will follow the movement of the mouse and make the corresponding movement. It probably looks something like this.

Generally speaking, CSS is responsible for presentation and JavaScript is responsible for behavior. The effect of mouse following is a behavior, and JavaScript is usually needed to achieve it.

Of course, the focus of this article is to introduce how to use CSS to simulate some mouse following behavior animation effects without JavaScript.

Principle

Taking the above Demo as an example, to use CSS to implement mouse follow, the most important point is:

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

OK, in fact, many CSS effects are inseparable from the word blindfold. To monitor where the mouse is currently, we just need to fill the page with elements:

We use 100 elements to cover the entire page. When hovering, the color is displayed. 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 divs
</div>

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

We can get this effect:

Okay, if the hover effect of each element is removed, then the operation page at this time has no effect. But at the same time, through the :hover pseudo, we can probably know which interval on the page is on the page.

Let's continue, let's add an element (round ball) to the page, and position it absolutely in the middle of the page:

<div class="g-ball"></div>

.ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

Finally, with the help of the ~ sibling element selector, we control the position of the blob element when hovering over the page (actually hovering over a hundred hidden divs) by the div we are currently hovering over.

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

At this point, a simple pure CSS implementation of the mouse-following effect has been achieved, for your convenience, take a look at the following image to understand.

If you want to view the complete demonstration, you can click here:CodePen Demo -- CSS to achieve mouse follow

Existing problems

As far as the above Demo is concerned, there are still many flaws, such as

poor accuracy

You can only control the movement of the element to the space where the div is, not the exact mouse position. For this, we can optimize by increasing the number of hidden divs. For example to increase 100 tiled divs to 1000 tiled divs.

Movement is not smooth enough

The effect does not look silky enough, and this may need to be optimized through a reasonable easing function and appropriate animation delay.

More attempts

Hmm. The principle is mastered, so let's see what other interesting effects we can drum up using this technique.

CSS mouse follow button effect

At first, I saw this effect on CodePen, using SVG + CSS + JS, and I thought, using only CSS, could I copy.

CodePen Demo -- Gooey mouse follow

Well, the ideal is very rich, but the reality is very hard. Using CSS alone, there are still many limitations.

• But we can still use the methods described above to achieve mouse follow
• Using the CSS filter filter: blur() contrast() to simulate element blending, see this article: CSS Filter Tips and Details You Didn't Know About

Okay, look at the bankruptcy version of the simulation using just CSS.

It's a bit too weird, so you can tighten up the effect a bit, by adjusting the colors, the filter strength (just trying everything...) to get a slightly better and similar effect: !

CodePen Demo -- CSS mouse follow button effect

Full screen mouse follow animation

OK, go ahead, here's something a little flashier. Well, it's the flashy kind. 😅

If we control not just one element, but multiple elements. The animation effects between the elements are then set to different transition-delay, sequential delay motion. Wow, it's exciting to think about. Like this.

CodePen Demo -- mouse-follow animation PURE CSS MAGIC MIX

If we could be a little more imaginative, then we could collide a little more with.

This effect is the work of a Japanese CodePen author I really like, Yusuke Nakaya, source code: Demo -- Only CSS: Water Surface

Mouse Follow Indication

Of course, it is not necessary to indicate the movement of an element. The technique of using a div to spread out the page to capture the current position of an element can also be used for other effects, such as indicating mouse movement: !

1. transition-duration: 0.5s for the default background-spread div
2. when hovering to the element background div, change the transition-duration: 0s of the div currently hovered to, and give the background color when hovering, so that the div currently hovered to will be displayed immediately
3. When the mouse leaves the div, the transition-duration of the div will change back to the default state, that is, transition-duration: 0.5s, and the background color will disappear, so that the background color of the div left will slowly transition to transparent, causing the effect of a vignette.

CodePen Demo -- cancle transition

Finally

More wonderful CSS technical articles are summarized in my Github -- iCSS.

And maybe you will love my CodePen, which has a large number of amazing CSS effects.

Well, that's all for this article, I hope it helps you. :)