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

Scrolling Video Code
Canvas method
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>
background image method
The below code is similar to above, however, it references a div on your page with the class “change-background” .
The advantage to this method is it will visually work better for container divs where you plan to have content laid on top of your scrolling background. However, the downside is that all frames are preloaded – so it will have an impact on your website load time
For this method to work, you will need a div with a class “change-background” which you will need to set to full page width and a height which exceeds the height of your screen (for example, 200vh). You also need to set the background size to 100% and attachment to fixed, you can do this using the following CSS.
.change-background {
width:100vw;
height: 200vh;
background-size:100%;
background-attachment:fixed;
}
<script type="text/javascript">
const html = document.documentElement;
const target = document.querySelector(‘.change-background’);
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var mobilePrefix = ‘mobile-‘;
} else {
var mobilePrefix = ”;
}
const frameCount = 60;
const currentFrame = index => (
`https://b2262984.smushcdn.com/2262984/wp-content/uploads/2023/01/${mobilePrefix}${index.toString().padStart(4, ‘0’)}.jpg?lossy=1&strip=1&webp=1`
)
const preloadImages = () => {
const images = [];
for (let i = 1; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
img.style.display = ‘none’;
document.body.appendChild(img);
images.push(img);
}
return images;
};
const images = preloadImages();
const updateBackground = index => {
target.style.backgroundImage = `url(${images[index – 1].src})`;
};
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(() => updateBackground(frameIndex + 1))
});
updateBackground(1);
</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)