button.btn Hover me
View Compiled
html
background-color: #fff
body
display: flex
align-items: center
justify-content: center
height: 100vh
background-image: url('https://images.unsplash.com/photo-1569350080887-dd38c27caad0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80')
background-position: center
background-size: cover
.btn
background-color: orange
margin-top: -30vh
border: none
padding: 16px 32px
cursor: pointer
View Compiled
class FollowCur {
constructor(options = {}) {
this.cur = null
this.flw = false
this.options = options
this.width = this.options.width || 20
this.height = this.options.height || 20
this.bdRadius = this.options.bdRadius || '50%'
this.create()
this.attachEvent()
}
attachEvent() {
window.addEventListener('mousemove', e => {
this.follow(e)
})
window.addEventListener('mouseout', e => {
// TweenLite.to(this.cur, .4, { opacity: 0 })
gsap.to(this.cur, { opacity: 0, duration: .4 })
this.flw = false
})
const boxes = this.options.hoverElems
if (boxes && boxes.length) {
for (let i = 0; i < boxes.length; i++) {
const nodes = document.querySelectorAll(boxes[i])
for (let j = 0; j < nodes.length; j++) {
const node = nodes[i]
node.addEventListener('mouseenter', e => {
// TweenLite.to(this.cur, .3, {
// scale: 1.6,
// opacity: 0
// })
gsap.to(this.cur, {
scale: 1.6,
opacity: 0,
duration: .3
})
})
node.addEventListener('mouseleave', e => {
// TweenLite.to(this.cur, .3, {
// scale: 1,
// opacity: 1
// })
gsap.to(this.cur, {
scale: 1,
opacity: 1,
duration: .3
})
})
}
}
}
}
follow(e) {
const x = e.clientX
const y = e.clientY
if (!this.flw) {
// TweenLite.set(this.cur, { x, y })
gsap.set(this.cur, { x, y })
// TweenLite.to(this.cur, 0.4, {
// opacity: 1,
// ease: Sine.easeOut
// })
gsap.to(this.cur, {
opacity: 1,
duration: .4,
ease: "Sine.easeOut"
})
this.flw = true
}
// TweenLite.to(this.cur, 0.4, {
// x, y, ease: Sine.easeOut
// })
gsap.to(this.cur, {
x, y, ease: "Sine.easeOut ", duration: .4
})
}
create() {
this.cur = document.createElement('div')
this.cur.className = 'follow-cur'
this.cur.style.width = `${this.width}px`
this.cur.style.height = `${this.height}px`
this.cur.style.marginLeft = `-${this.width / 2}px`
this.cur.style.marginTop = `-${this.height / 2}px`
this.cur.style.borderRadius = this.bdRadius
this.cur.style.zIndex = 9999999
this.cur.style.pointerEvents = 'none'
this.cur.style.opacity = 0
// this.cur.style.backgroundColor = 'rgba(0,0,0, 0.6)'
this.cur.style.backgroundColor = 'white'
this.cur.style.mixBlendMode = 'exclusion'
this.cur.style.backfaceVisibility = 'hidden'
this.cur.style.position = 'fixed'
this.cur.style.top = '0px'
this.cur.style.left = '0px'
document.body.appendChild(this.cur)
}
}
new FollowCur({
width: 30,
height: 30,
hoverElems: ['.btn']
})
This Pen doesn't use any external CSS resources.