How I make £5k+ per month building websites – video course – JAN 2023 

Scrolling Video Code

The below code references a canvas element on your. On scroll, the background of your canvas will move through a sequence of pngs (could also work with jpgs, which may be more load time efficient).

Some things to note.

PNG Naming convention

Your PNG sequence will need to be named from 001.png – xxx.png. You can prefice this however you want (i.e. video-001.png video-002.png) – but you’ll need to reflect this prefix in the URL written in the code

Mobile styling

I’m really big on mobile styling, so I always create a 9:16 version of my videos so they fit perfectly on phones. Upload your mobile PNG sequence with the naming convention mobile-001.png etc. The code will detect if the visitor is on a mobile device and add this prefix to the background image it serves.

<script type="text/javascript">
const html = document.documentElement;
// canvas ID goes in here
const canvas = document.getElementById("scroll-roadmap");
const context = canvas.getContext("2d");

 

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
var mobilePrefix = ‘mobile-‘;
} else {
var mobilePrefix = ”;
}

// Number of frames here (how many PNGs in your sequence

const frameCount = 500;

// Upload directory goes here. Do not edit from ${mobilePrefix} onwards, unless you are planning to add your own prefix to the PNG file names

const currentFrame = index => (
`https://YOUR UPLOAD DIRECTORY GOES HERE/${mobilePrefix}${index.toString().padStart(4, ‘0’)}.png`
)

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 = window.innerWidth;
canvas.height = window.innerHeight;

//canvas.width = 1920;
//canvas.height = 1080;
img.onload=function(){
context.drawImage(img, 0, 0, window.innerWidth, window.innerHeight);
}

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

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>

Want to make £5k+ a month building websites?

I’ve been making websites for over 10 years, and you know what is nuts? I don’t advertise. My clients come to me.

I’ve finessed a workflow which pays 4 figures, with a quick turnaround time without compromising build quality, and now I want to share that process and my resources with you.

Full course coming Jan 2023 – sign up to my mailing list to be the first to hear about it
(promise not to spam ya)