对于投资组合网站,我使用的是我发现的代码片段 here,一种 DVD 动画。由于我在 Mac OS Big Sur 上安装了 Safari 14,动画无法正常工作。它似乎留下了一些运动的痕迹。有人知道这个问题吗?我该如何解决?非常感谢。
Here is a screen cap on Chrome Here is a screen cap on Safari 14
这是我的动画js:
//Constants
const section = document.getElementById("anim_jtm");
const logo = document.getElementById("logo");
const body = document.getElementById("body");
section.style.height = body.clientHeight + "px";
section.style.width = body.clientWidth + "px";
// Logo moving velocity Variables
let xPosition = 10;
let yPosition = 10;
let xSpeed = 0.7;
let ySpeed = 0.7;
function update() {
logo.style.left = xPosition + "px";
logo.style.top = yPosition + "px";
}
setInterval(() => {
if (xPosition + logo.clientWidth >= body.clientWidth || xPosition <= 0) {
xSpeed = -xSpeed;
logo.style.fill = randomColor();
}
if (yPosition + logo.clientHeight >= body.clientHeight || yPosition <= 0) {
ySpeed = -ySpeed;
logo.style.fill = randomColor();
}
xPosition += xSpeed;
yPosition += ySpeed;
update();
}, 1);
function randomColor() {
let color = "#";
color += Math.random().toString(16).slice(2, 8).toUpperCase();
return color;
}
window.addEventListener("resize", () => {
xPosition = 10;
yPosition = 10;
section.style.height = body.clientHeight + "px";
section.style.width = body.clientWidth + "px";
});