https://codepen.io/mprquinn/pen/OmOMrR/
credit: Mike Quinn
The following code triggers an animation when hovering over a link. As I understand the code, the x and y coords should update the position each time the function is called, as getBoundingClientRect() is supposed to update the coords when the document is scrolled...
If you hover over the link without scrolling the page, you'll see the animation surround the link as intended, but if the document is scrolled, the animation is triggered above the link. I notice in console that X and Y aren't updated when the document is scrolled and getBoundingClientRect() is called...
const links = document.querySelectorAll('a');
links.forEach(link => link.addEventListener('mouseenter', shootLines));
function shootLines(e) {
const itemDim = this.getBoundingClientRect(),
itemSize = {
x: itemDim.right - itemDim.left,
y: itemDim.bottom - itemDim.top,
},
shapes = ['line'],
colors = ['#2FB5F3',
'#FF0A47',
'#FF0AC2',
'#47FF0A'];
const chosenC = Math.floor(Math.random() * colors.length),
chosenS = Math.floor(Math.random() * shapes.length);
// create shape
const burst = new mojs.Burst({
left: itemDim.left + (itemSize.x/2),
top: itemDim.top + (itemSize.y/2),
radiusX: itemSize.x,
radiusY: itemSize.y,
count: 8,
children: {
shape: shapes[chosenS],
radius: 10,
scale: {0.8: 1},
fill: 'none',
points: 7,
stroke: colors[chosenC],
strokeDasharray: '100%',
strokeDashoffset: { '-100%' : '100%' },
duration: 450,
delay: 100,
easing: 'quad.out',
isShowEnd: false,
}
});
burst.play();
}
.container {
margin-top: 20%;
height: 110vh;
}
<div class="container"><a href="javascript:void(0);">test</a></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js"></script>
from mojs animation firing at object's old location after scrolling
No comments:
Post a Comment