Reveal Text On Hover Using A Cutom Cursor

Category: Javascript , Text | August 10, 2022
Author:trananhtuat
Views Total:24 views
Official Page:Go to website
Last Update:August 10, 2022
License:MIT

Preview:

Reveal Text On Hover Using A Cutom Cursor

Description:

A text reveal spotlight effect that enables a custom blob cursor to reveal any text hidden behind the page.

How to use it:

1. Make your text the same color as the background.

<div class="content__text">
  <h1 class="title">
    CSSScript.Com
  </h1>
</div>
body {
  background-color: #222;
}
.content__text {
  color: #222;
}

2. Create a custom blob on the page.

<div class="cursor" id="cursor"></div>
.cursor {
  height: 300px;
  width: 300px;
  background-color: rgba(165, 165, 165, 50%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  position: absolute;
  z-index: -1;
}

3. Enable the text reveal on hover effect.

const cursor = document.querySelector('#cursor')
window.addEventListener('mousemove', (e) => {
  cursor.style.left = (e.x - 150) + 'px'
  cursor.style.top = (e.y - 150) + 'px'
})

You Might Be Interested In:


Leave a Reply