.container Move your cursor!
View Compiled
*
box-sizing border-box
body
min-height 100vh
font-weight bold
font-size 1.15rem
font-family sans-serif
text-align center
display grid
place-items center
background hsl(180, 50%, 50%)
.container
height 135px
width 135px
background hsl(25, 50%, 80%)
display grid
place-content center
border-radius 50%
position relative
&:after
content ''
position absolute
top 50%
left 50%
height 200px
width 200px
border-radius 50%
background hsla(280, 50%, 80%, 0.5)
transform translate(-50%, -50%)
z-index -1
View Compiled
import gsap from 'https://cdn.skypack.dev/gsap'
const CONTAINER = document.querySelector('.container')
const generateHandler = (element, proximity, cb) => ({x, y}) => {
const bounds = 100
const elementBounds = element.getBoundingClientRect()
const centerX = elementBounds.left + elementBounds.width / 2
const centerY = elementBounds.top + elementBounds.height / 2
const boundX = gsap.utils.mapRange(centerX - proximity, centerX + proximity, -bounds, bounds, x)
const boundY = gsap.utils.mapRange(centerY - proximity, centerY + proximity, -bounds, bounds, y)
cb(boundX / 100, boundY / 100)
}
document.addEventListener('pointermove', generateHandler(CONTAINER, 100, (x, y) => {
CONTAINER.innerText = `x: ${x.toFixed(1)}; y: ${y.toFixed(1)};`
}))
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.