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

PRE SIGNUP

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)