CSS move cursor to make text with multiple contrasting effects

During the weekend browsing codepen , I found a good animation interaction effect. As shown in the figure above, there is a nested circle of multiple colors that moves with the mouse, and forms a different contrast color with the text. The interaction effect gives people The feeling is bright, and this article will explain its realization process.

Animation effect decomposition

Based on the above animation renderings, it can be mainly decomposed into the following parts:

• There is a nested circle with three colors
• Nested circles follow mouse movement
• A contrasting color effect occurs with the text during the circular movement
• Accompanying elastic effect during circular movement

The first two function points are relatively simple to implement, and the latter two function points require a certain understanding of the relevant knowledge points, which are relatively fast to implement, and then enter the code implementation process.

Code

To achieve three circular nesting, just three divs are enough. The style here uses SCSS , the writing is relatively simple, and the @each function is used for loop processing. The code is as follows:

 <div class="shapes">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
</div>

scss

 .shapes {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #2128bd;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  
  $shapes: (#005ffe: 650px, #ffe5e3: 440px, #ffcc57: 270px);
  
  @each $color, $size in $shapes {
    &.shape-#{index($shapes, ($color $size))} {
      background: $color;
      width: $size;
      height: $size;
      margin: (-$size/2) 0 0 (-$size/2);
    }
  }
}

At this point, a simple multi-circle nested graph comes out.

Then it is to let the graphic move with the mouse. Here, you only need to monitor the mouse movement event. Below cursor is the origin of the center, shape is three circles.

 const cursor = document.querySelector('.cursor')
const shape = document.querySelectorAll('.shape')

document.body.addEventListener("mousemove", evt => {
  const mouseX = evt.clientX;
  const mouseY = evt.clientY;

  cursor.style = `transform: translate(${mouseX}px, ${mouseY}px);`
  
  shape.forEach(item => {
    item.style = `transform: translate(${mouseX}px, ${mouseY}px);`
  })

})

Next, the contrast color effect of circle and text is realized. Here, the blending mode in CSS3 mix-blend-mode the mixing mode in screen is used. color”, the calculation formula is as follows:

C in the formula represents the final mixed RGB color value (range is 0-255), A and B represent the two colors used for mixing RGB color value (the range is also 0 -255). As can be seen from the content of the formula, the color of the filter color blending mode is to multiply the pixel value of the complementary color of the two colors, and then divide by the complementary color value of 255.

For example, there is a red whose value RGB is (255,0,0), and a blue whose RGB value is (0,0,255), then these two colors The color value after using the screen blending mode is:

• R = 255 – (255 – 255) * (255 – 0) / 255 = 255
• G = 255 – (255 – 0) * (255 – 0) / 255 = 0
• B = 255 – (255 – 0) * (255 – 255) / 255 = 255

Then the final color value is RGB(255,0,255) , here are some intuitive features:

• Perform a color filter with any color and black, or render the original color;
• Performing a color filter on any color and white results in white;
• Any color mixed with other colors in the Screen mode will be lighter, somewhat similar to bleaching.

Going back to our initial animation effect, the circle that follows the mouse movement will only appear when it intersects with the text, and is invisible in other areas, then we will set the background color of the text element to white, because using After filtering, any color and white are filtered to get white.

 .content {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: #fff;
  mix-blend-mode: screen;
}

At this point, our basic effect has been achieved, but the moving circle is relatively blunt at this time. The original effect uses the gsap animation library. The effect of the circle following the mouse is very smooth and comfortable.

The GreenSock Animation Platform (GSAP) can animate everything that JavaScript can manipulate (CSS properties, SVG, React, canvas, generic objects, etc.), while solving compatibility problems on different browsers, and it is extremely fast ( 20 times faster than jQuery). About 10 million sites and many major brands use GSAP.

The js code after using gsap is as follows, very concise:

 document.body.addEventListener("mousemove", evt => {
  const mouseX = evt.clientX;
  const mouseY = evt.clientY;
  
  gsap.set(".cursor", {
    x: mouseX,
    y: mouseY
  })
  
  gsap.to(".shape", {
    x: mouseX,
    y: mouseY,
    stagger: -0.1
  })
})

Code online preview:
https://code.juejin.cn/pen/7127896394660053029

at last

This is the end of the overall code implementation. Based on this logic, we can also achieve similar effects, such as changing the background of the circle to a gradient color, adding shadows or replacing it with other image effects, etc. If you like it, try it yourself.

If you find it useful at the end, remember to like it and save it, maybe you will use it someday.

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)

refer to

Web front-end entry to actual combat: CSS mix-blend-mode filter screen blend mode

GSAP official website

codepen - carolineartz