Small JS Coding sidekick needed
Budget: €12 – €18 EUR
Im am not too much into js and need a small extension of a given js. My JS folds up a Laptop by getting seperate images on scroll. Just like here https://www.apple.com/de/macbook-pro-16/
The Job must be done today
Script:
const html = document.documentElement;
const canvas = document.getElementById("macbook");
const context = canvas.getContext("2d");
const frameCount = 121;
const currentFrame = index => (
`https://www.apple.com/105/media/us/macbook-pro-16/2019/fa0563a0-8534-4e01-a62a-081b87805fea/anim/hero/large/large_${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=1096;
canvas.height=728;
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()
HMTL
<canvas id="macbook" />
The TASK:
1. If scrolled up image 90 is reached add class to body "reached-90" and add class to #macbook "reached-open90". Remove classes if scrolled down to a lower number image.
2. If scrolled up image 110 is reached add class to body "reached-110" and add class to #macbook "reached-open110". Remove classes if scrolled down to a lower number image.
3. If scrolled up image 121 is reached add class to body "reached-121" and add class to #macbook "reached-open121". Remove classes if scrolled down to a lower number image.
I have jQuery on Page.
Delivery: Send the altered script. I will build it into page.
The Job might be interesting as I want to do more Apple like interactions and animations infuture on my page
The Job must be done today
Script:
const html = document.documentElement;
const canvas = document.getElementById("macbook");
const context = canvas.getContext("2d");
const frameCount = 121;
const currentFrame = index => (
`https://www.apple.com/105/media/us/macbook-pro-16/2019/fa0563a0-8534-4e01-a62a-081b87805fea/anim/hero/large/large_${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=1096;
canvas.height=728;
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()
HMTL
<canvas id="macbook" />
The TASK:
1. If scrolled up image 90 is reached add class to body "reached-90" and add class to #macbook "reached-open90". Remove classes if scrolled down to a lower number image.
2. If scrolled up image 110 is reached add class to body "reached-110" and add class to #macbook "reached-open110". Remove classes if scrolled down to a lower number image.
3. If scrolled up image 121 is reached add class to body "reached-121" and add class to #macbook "reached-open121". Remove classes if scrolled down to a lower number image.
I have jQuery on Page.
Delivery: Send the altered script. I will build it into page.
The Job might be interesting as I want to do more Apple like interactions and animations infuture on my page