前些天发现了一个人工智能学习网站,通俗易懂,风趣幽默,最重要的屌图甚多,忍不住分享一下给大家。点击跳转到网站。
先看一下展示效果,滚动鼠标中轴耳机的光效会逐渐变化:
代码也是很简单的一个图片替换,但重点是丝滑~:
<canvas id="hero-lightpass"></canvas>
console.clear();
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
canvas.width = 1158;
canvas.height = 770;
const frameCount = 147;
const currentFrame = index => (
`https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${(index + 1).toString().padStart(4, '0')}.jpg`
);
const images = []
const airpods = {
frame: 0
};
for (let i = 0; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
images.push(img);
}
gsap.to(airpods, {
frame: frameCount - 1,
snap: "frame",
ease: "none",
scrollTrigger: {
scrub: 0.5
},
onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});
images[0].onload = render;
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[airpods.frame], 0, 0);
}
html {
height: 100vh;
}
body {
height: 5000px;
background: #000;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100vw;
max-height: 100vh;
}