我正在嘗試復制 Apple 的滾動影片，但想將影片系結到特定的 div 滾動條，而不是主 html/body 滾動條。
我從下面這個例子：https ://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/
// Canvas settings
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
canvas.width=1158;
canvas.height=770;
// Preloading images to drastically improve performance
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.toString().padStart(4, '0')}.jpg`);
const frameCount = 148; // There 148 images for that animation-sequence to load
const images = [];
const preloadImages = () => {
for (let i = 1; i < frameCount; i ) {
images[i] = new Image(); // This is functionally equivalent to document.createElement('img').
images[i].src = currentFrame(i);
}
};
preloadImages();
// Draw the first image
const img = new Image();
img.src = currentFrame(1);
img.onload = function(){
context.drawImage(img, 0, 0);
}
// Scroll interactions
const html = document.getElementsByTagName('html');
window.addEventListener('scroll', () => {
const scrollTop = html[0].scrollTop;
// console.log('scrollTop: ', scrollTop);
// console.log('html.scrollHeight: ', html[0].scrollHeight);
// console.log('window.innerHeight: ', window.innerHeight);
const maxScrollTop = html[0].scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.floor(scrollFraction * frameCount)
);
// console.log('FrameIndex', frameIndex);
requestAnimationFrame(() => context.drawImage(images[frameIndex 1], 0, 0));
});html {
height: 100vh;
}
body {
background: #000;
height: 200vh;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
max-height: 100vh;
max-width: 100vw;
transform: translate(-50%, -50%);
}
h1 {
color: white;
}<body>
<canvas id="hero-lightpass"></canvas>
</body>我嘗試將畫布放在 DIV 中，使 DIV 可滾動，并將 JS 系結到該 DIV，但我無法使其作業。
破例： https ://jsfiddle.net/w6o0k3sf/
任何幫助是極大的贊賞！
uj5u.com熱心網友回復：
只需更改html[0]為html
// Canvas settings
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
canvas.width = 1158;
canvas.height = 770;
// Preloading images to drastically improve performance
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.toString().padStart(4, '0')}.jpg`);
const frameCount = 148; // There 148 images for that animation-sequence to load
const images = [];
const preloadImages = () => {
for (let i = 1; i < frameCount; i ) {
images[i] = new Image(); // This is functionally equivalent to document.createElement('img').
images[i].src = currentFrame(i);
}
};
preloadImages();
// Draw the first image
const img = new Image();
img.src = currentFrame(1);
img.onload = function() {
context.drawImage(img, 0, 0);
}
// Scroll interactions
const html = document.getElementById('wrap');
html.addEventListener('scroll', () => {
const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.floor(scrollFraction * frameCount)
);
requestAnimationFrame(() => context.drawImage(images[frameIndex 1], 0, 0));
});html {
height: 100vh;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
#wrap {
height: 400px;
width: 100vw;
overflow-y: scroll;
background: red;
z-index: 5;
}
#container {
height: 2000px;
background: yellow;
}
canvas {
position: fixed;
top: 0;
max-height: 80vh;
max-width: 80vw;
}<body>
<div id="wrap">
<div id="container">
<canvas id="hero-lightpass"></canvas>
</div>
</div>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414288.html
標籤：