#follower
#circle1
#circle2
View Compiled
html
cursor none
background #666
#follower
position absolute
top 50%
left 50%
#circle1
position absolute
-webkit-animation: pulse 2s infinite; /* Chrome, Safari, Opera */
animation: pulse 2s infinite;
background white
border-radius 50%
height 0em
width 0em
margin-top 0em
margin-left 0em
#circle2
position absolute
-webkit-animation: pulse 4s infinite; /* Chrome, Safari, Opera */
animation: pulse 4s infinite;
background rgba(200,0,0,0.8)
border-radius 50%
height 0em
width 0em
margin-top 0em
margin-left 0em
$keyframe-name = pulse
@keyframes {$keyframe-name}
{0%}
opacity 0.2
height 1em
width 1em
margin-top -0.5em
margin-left -0.5em
{50%}
opacity 0.9
height 3em
width 3em
margin-top -1.5em
margin-left -1.5em
{100%}
opacity 0.2
height 1em
width 1em
margin-top -0.5em
margin-left -0.5em
View Compiled
follower = document.getElementById('follower')
printout = document.getElementById('printout')
mouseX = (event) =>
return event.clientX
mouseY = (event) =>
return event.clientY
positionElement = (event) =>
mouse = {
x: mouseX(event)
y: mouseY(event)
}
follower.style.top = mouse.y + 'px'
follower.style.left = mouse.x + 'px'
timer = false
window.onmousemove = init = (event) =>
_event = event
timer = setTimeout =>
positionElement(_event)
, 1
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.