https://codepen.io/mprquinn/pen/OmOMrR/
credit: Mike Quinn
以下代码将鼠标悬停在链接上时触发动画。据我了解代码,每次调用函数时,x 和 y 坐标都应该更新位置,因为 getBoundingClientRect() 应该在文档滚动时更新坐标...
如果将鼠标悬停在链接上而不滚动页面,您将按预期看到链接周围的动画,但如果滚动文档,则会在链接上方触发动画。我注意到在控制台中,当滚动文档并调用 getBoundingClientRect() 时,X 和 Y 不会更新...
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>
最佳答案
您只需为每个链接元素定义一次突发。我修改了代码以迭代链接并定义链接上的突发。在函数的末尾,我添加了一个事件监听器来播放突发。
您面临的问题是您正在使用 getBoundingClientRect,它给出了元素的视口(viewport)坐标。默认情况下,Burst 在文档主体元素(文档坐标)之外进行操作。当您滚动时,链接元素的文档坐标永远不会改变,但视口(viewport)坐标会改变。请参阅here简单的解释。
这基本上与您的代码相同,只是进行了修改以添加事件监听器以在最后播放突发。我相信这也会更有效,因为它不会在每次鼠标进入元素时创建新的突发实例。您链接到的 codepen 效率非常低,因为每次悬停链接时它都会在文档中创建新的突发元素,也会导致内存泄漏。
const links = document.querySelectorAll('a');
links.forEach(link => {
const itemDim = link.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,
}
});
// Add the mouseenter listener to play the burst.
link.addEventListener('mouseenter', function () { 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>
关于javascript - mojs动画在滚动后在对象的旧位置触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55410199/