OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Stop delay after javascript scrolling frame by frame

  • Thread starter Thread starter Ayhan
  • Start date Start date
A

Ayhan

Guest
after scrolling frame by frame you can't scroll the all page with other content for a few seconds. can i stop this with javascript so that you can continue scrolling the entire page with other content?

Code:
<script language="javascript" type="text/javascript">

const html = document.documentElement;
const canvas = document.getElementById("3d");
const context = canvas.getContext("2d");

const frameCount = 27;
const currentFrame = index => (
  `https://www.in-visionen.de/Webdesign/Webdesign${index.toString().padStart(4, '0')}.jpg`
)

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};

const img = new Image()
img.src = currentFrame(1);
canvas.width=3840;
canvas.height=2160;
img.onload=function(){
  context.drawImage(img, 0, 0);
}

const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0);
}

window.addEventListener('scroll', () => {  
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount)
  );
  
  requestAnimationFrame(() => updateImage(frameIndex + 1))
});

preloadImages()
</script>

<p>after scrolling frame by frame you can't scroll the all page with other content for a few seconds. can i stop this with javascript so that you can continue scrolling the entire page with other content?</p>
<pre><code><script language="javascript" type="text/javascript">

const html = document.documentElement;
const canvas = document.getElementById("3d");
const context = canvas.getContext("2d");

const frameCount = 27;
const currentFrame = index => (
`https://www.in-visionen.de/Webdesign/Webdesign${index.toString().padStart(4, '0')}.jpg`
)

const preloadImages = () => {
for (let i = 1; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
}
};

const img = new Image()
img.src = currentFrame(1);
canvas.width=3840;
canvas.height=2160;
img.onload=function(){
context.drawImage(img, 0, 0);
}

const updateImage = index => {
img.src = currentFrame(index);
context.drawImage(img, 0, 0);
}

window.addEventListener('scroll', () => {
const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.ceil(scrollFraction * frameCount)
);

requestAnimationFrame(() => updateImage(frameIndex + 1))
});

preloadImages()
</script>
</code></pre>
 

Latest posts

A
Replies
0
Views
1
Aarif Hussain A Nassar
A
F
Replies
0
Views
1
Fahmi Nur Fachrurozi
F
Top