Please let me know how to change the image.

I am currently learning front-end technology.
Could someone tell me how to change the image of the code below?
Thank you for your cooperation.

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`;

constimages=[];
constairpods = {
  frame:0
};
let isAnimating=false;

for(leti=0;i<frameCount;i++){
  constimg = new Image();
  img.src=currentFrame(i);
  images.push(img);
}

constweenPods=(targetFrame)=>{
  gsap.to(airpods,{
    frame —targetFrame,
    duration —3,
    snap: "frame",
    ease: "none",
    onUpdate—render,
    onComplete:()=>(isAnimation=false)
  });
};

const previous=()=>{
  const_activeFrame = airpods.frame;
  if(isAnimation||_activeFrame===0)return;
  isAnimation = true;
  if(_activeFrame===146){
    return betweenPods (100);
  }
  if(_activeFrame===100){
    return betweenPods(40);
  }
  twoPods(0);
};
const next=()=>{
  const_activeFrame = airpods.frame;
  if(isAnimation||_activeFrame===frameCount) return;
  isAnimation = true;
  if(_activeFrame===40){
    return betweenPods (100);
  }
  if(_activeFrame===100){
    return twoPods (146);
  }
  twenPods(40);
};

Observer.create({
  target: "#hero-lightpass",
  type: "wheel",
  onUp:()=>previous(),
  onDown:() = > next()
});

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{
  background: #000;
}

US>canvas{
  position:fixed;
  left: 50%;
  top: 50%;
  transform —translate (-50%, -50%);
  max-width —100%;
  max-height —100vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <metacharset="UTF-8">
  <title> CodePen-GSAP Observer AirPods Tween</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!--partial:index.partial.html-->
<canvas id="hero-lightpass"/>
<!--partial-->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap/dist/Observer.min.js'></script><script src="./script.js">/script>

</body>
</html>

javascript ui

2022-11-21 15:52

1 Answers

The image tag is created by
img.src=currentFrame(i);
So
const currentFrame=(index)=>
I wonder if I should change the image URL returned by

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://placehold.jp/ffffff/${(255-index)*0x10101).toString(16)}/1158x770.png`;

constimages=[];
constairpods = {
  frame:0
};
let isAnimating=false;

for(leti=0;i<frameCount;i++){
  constimg = new Image();
  img.src=currentFrame(i);
  images.push(img);
}

constweenPods=(targetFrame)=>{
  gsap.to(airpods,{
    frame —targetFrame,
    duration —3,
    snap: "frame",
    ease: "none",
    onUpdate—render,
    onComplete:()=>(isAnimation=false)
  });
};

const previous=()=>{
  const_activeFrame = airpods.frame;
  if(isAnimation||_activeFrame===0)return;
  isAnimation = true;
  if(_activeFrame===146){
    return betweenPods (100);
  }
  if(_activeFrame===100){
    return betweenPods(40);
  }
  twoPods(0);
};
const next=()=>{
  const_activeFrame = airpods.frame;
  if(isAnimation||_activeFrame===frameCount) return;
  isAnimation = true;
  if(_activeFrame===40){
    return betweenPods (100);
  }
  if(_activeFrame===100){
    return twoPods (146);
  }
  twenPods(40);
};

Observer.create({
  target: "#hero-lightpass",
  type: "wheel",
  onUp:()=>previous(),
  onDown:() = > next()
});

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{
  background: #000;
}

US>canvas{
  position:fixed;
  left: 50%;
  top: 50%;
  transform —translate (-50%, -50%);
  max-width —100%;
  max-height —100vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <metacharset="UTF-8">
  <title> CodePen-GSAP Observer AirPods Tween</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!--partial:index.partial.html-->
<canvas id="hero-lightpass"/>
<!--partial-->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap/dist/Observer.min.js'></script><script src="./script.js">/script>

</body>
</html>

2022-11-21 16:25

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656