How to implement mouse following effect using pure CSS? (detailed code explanation)

Mouse following, as the name suggests, means that the elements will follow the movement of the mouse and make corresponding movements. Generally speaking, CSS is responsible for presentation and JavaScript is responsible for behavior. The effect of mouse following is behavior, and it usually requires the help of JS to achieve it.

Of course, the focus of this article is to introduce how to use CSS to simulate some mouse-following behavioral animation effects without resorting to JS.

Let’s first take a look at what the mouse following effect looks like:

Principle

Taking the above Demo as an example, to use CSS to implement mouse following, 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 "eyesore". To monitor where the current mouse is, we only need to cover 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个
</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)
    }
}

You can get this effect:

Okay, if you remove the hover effect of each element, then the operation page at this time is actually It has no effect. But at the same time, through the :hover pseudo-class, we can roughly know which range the current mouse is on the page.

Okay, let’s continue. Let’s add another element (a round ball) to the page and position it absolutely to 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, we use ~ Brothers The element selector, when on the hover page (actually hovering a hundred hidden divs), controls the position of the ball element through the div currently hovered to.

@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 effect of mouse following has been achieved. It is convenient for everyone to understand. Just look at the picture below to understand:

For the complete DEMO, you can click here to take a look: CodePen Demo -- CSS to implement mouse following

Existing problems

Judging from the above Demo, there are still many flaws, such as

The accuracy is too poor

It can only control the movement of elements to the space where the div is located, but It is not the precise position of the mouse. For this, we can optimize by increasing the number of hidden divs. For example, increase from 100 tiled divs to 1000 tiled divs.

The movement is not smooth enough

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

Get dry

Yeah. Now that we have mastered the principle, let’s take a look at what other interesting effects we can create using this technique.

CSS mouse follow button effect

At first, I saw the following effect on CodePen, which was implemented using SVG CSS JS. Just thinking, using only CSS, can I copy it:

CodePen Demo -- Gooey mouse follow

Okay, Ideal is full, the reality is very skinny. Just using CSS still has many limitations.

• But we can still use the method introduced above to implement mouse following

• Use CSS filter filter: blur() contrast() to simulate elements Fusion, you can read this article for details: CSS filter skills and details you don’t know

Okay, let’s take a look at the bankruptcy version simulation using only CSS Effect:

It’s a bit too weird. You can tighten up the effect a little. By adjusting the color and filter strength (just try various things...), you can get a slightly better one. Similar effects to YiDiudiu:

Demo poke me, CodePen Demo -- CSS mouse follow button effect

Full screen mouse following animation

OK, continue, let’s do something more dazzling. Well, that's the flashy kind. sweat_smile

If we control more than one element, but multiple elements. The animation effects between multiple elements are set with different transition-delay to delay the movement in sequence. Wow, that’s exciting just thinking about it. For example:

CodePen Demo -- Mouse following animation PURE CSS MAGIC MIX

If we can be more imaginative, Then you can collide with more sparks:

This effect is the work of Yusuke Nakaya, a Japanese CodePen author who I like very much. Source code: Demo - - Only CSS: Water Surface

Mouse Follow Instructions

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

1. Default full background The transition-duration of the div: 0.5s

2. When hovering to the element background div, change the transition-duration of the div that the current hover is to: 0s , and give the background color when hovering, so that the div currently hovered will be displayed immediately

3. When the mouse leaves the div, the transition-duration of the div changes back to the default state, which istransition-duration: 0.5s, and the background color disappears at the same time, so that the background color of the left div will slowly transition to transparent, causing a ghost effect

CodePen Demo -- cancle transition

##Finally

CSS-Inspiration -- CSS Inspiration

This article is reproduced from: https://www.cnblogs.com/coco1s/p/10481872.html

js special effects collection

The above is the detailed content of How to implement mouse following effect using pure CSS? (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!