JavaScript Canvas: Pixelated Image Hover Effect Tutorial

The canvas creates a stunning pixelated image effect that follows mouse movements seamlessly.

### Creating a Pixelated Image Reveal Effect with Canvas and JavaScript
* 🎨 In this tutorial, the goal is to create a **pixelated image reveal effect** using HTML canvas and JavaScript, where images follow the **mouse movement** and reveal in a **non-linear fashion**.
* 🖥 The project involves setting up an **HTML file with a canvas element** and linking to a **CSS file for styling**, along with a **JavaScript file for functionality**.
* 🖌 The CSS includes global settings to **remove default margins and paddings**, as well as styles for the canvas and project links, ensuring that images have a **pixelated effect by disabling image smoothing**.
* 📐 The JavaScript begins by selecting the canvas and setting its dimensions according to the **device pixel ratio** to ensure **clarity on different screens**.
* 🖼 Images are loaded into an array, and event listeners are added to the project links to handle mouse interactions, allowing for **dynamic changes in opacity and z-index** when hovered.
* 🔄 A draw image function is created to handle the rendering of images on the canvas based on the **mouse position**, utilizing **linear interpolation** for **smooth animations**.
* 💻 The tutorial emphasizes the importance of using **pixelated fonts and images** to enhance the visual effect, showcasing how to **manipulate styles dynamically through JavaScript**.
* 🚀 Overall, the project combines several coding techniques to achieve a **modern and engaging user experience**, demonstrating the **power of canvas in web development**.

hi guys, welcome back. So today, I've got another interesting project here where we're going to be creating this project or menu list. And you can see when we cover our project, we get this kind of pixelated image effect appear, okay? And the image follows our mouse move as well, and you can see it's not linear. We're using linear interpolation to get that kind of smooth animation, okay? This is all done with a little JavaScript. You can see as well when we hover a link, all the other links appear opaque, and the link we hovered lights up. But the main focus of this tutorial is just to get that pixelated reveal effect for our images. We're using the canvas to achieve this. There's a fair bit of JavaScript code, I guess, but I think it's a really cool effect. I really like this, and you can see all as well also when we hover, the image appears above all of the images that aren't active and just remains underneath the one that is active, okay? So it's quite a cool modern effect.

think so, yeah. I hope you enjoyed the tutorial, guys, and let's get going. Thanks. Okay, guys, so to get started with this tutorial, you can see I've just got an index.html file, a style.css, and an app.js file. And I've also just downloaded some random images from unsplash.com. So we've just got six images here we're going to be using. I'm also going to be using a font called New Bit Regular. I've purchased this from Pangram Pangram, but we'll also be using a pixel font from Google Fonts as well. We can use this one, which is like a pixel effect as well. Okay, so let's get going here. So this first one I do is come into our index.html file. So we'll come into here, close these down, index.html, and just close this down. Okay, so let's just get a boilerplate code up and running. So we'll just do the Emmet here, and I'm just gonna in the title, we'll just put Projects or whatever. Okay, so Projects.

and then we just want to link to our app.js style.css file as well in our HTML header. So, we'll come under here, we just say link, and I'll just say style.css like so. And then we'll also just link to our app.js at the bottom of the body. Okay, so we say .forward slash app.js like so. Let's open this in live server just so we can see the changes as we go. Okay, so let me just minimize this a little. Okay, so now if we come into the body, um, what I'm going to do here, there's not really much HTML, um, we're just going to use a create a canvas first. Okay, so we're going to be using the canvas to actually display the images over the menu. This, uh, we use the canvas because we want to create that pixelated effect. Okay, and then underneath here, I'm just going to have a section. Okay, and then we're just gonna, we'll give this a class of project section, uh, projects-hyphen-section like so. And then in here, in this section, we're

going to have a div of a class called projects like that, and then coming into this div, I'm just going to have an analog list, and then we're going to list out our projects here, okay? So, we'll just say li, and I'll just say project one for now. Again, call, you know, name these relevant to your projects or your links, whatever you want to use this kind of list for, okay? So, just um, we'll have six links in total or six projects rather. Let's just rename these four, five, and finally six, okay? And there you can see our projects there, and you can see we've got this kind of white space here. That's because we have this canvas section. We're going to position this absolute, take out the flow of the document, and when we get to our CSS, which we can move on to now, as that's all that's everything for HTML, okay? So, not much there. Let's go to our style.css now. There's not too much CSS either, so um, the first thing I want to do actually.

is just um actually let's just get that Google font in as well for now. So we'll get, we'll come to this VT323 font here. I'm just going to copy this link section from Google Fonts. So these are all free to use. And then I can just um, yeah, I'll paste this up here in the link section again. Just tidy that up. Okay. So now if we come to our star.css next, let's just get our selectors, our global settings here. So I'm just going to say here margin zero, padding zero, and box size in border box like so. That takes all the default margins and paddings um away. Um next we want to do here is I'm just going to copy this uh, this font family selector here. So now you'll see if we paste this, if we have applied this to all of our writing, you can see we get a kind of pixelated effect that font. That's looking okay. Um next we want to do here is I'm just going to set, I don't know, I think that'll be it for

our um what I do want to do actually just say this style of none as well because we don't want any of our kind of list items to have uh bullet points. Okay, so you know you had the bullet points here that just removes it. That's it for global settings for now. Next one I'll do is just select the HTML on the body and we're going to give this a background color. So um sorry HTML and body here. I'll give this a background color of um 262 525. It's nice gray, dark gray color. Okay, and then I'm also I want to just um for the purpose of the tutorial. I just wanna implement scrolling functionality. Okay, so I'm just gonna set the height to uh uh 2000 pixels just so we can kind of get some scrolling there as well. Okay um and then so coming underneath this next one. I'll do is just get our section element. So we'll say section. Actually let's just set the canvas first. Okay, and what I'm going to do with this canvas. We're just going to set the position to

be fixed. Okay, so position fixed like so, and you can see now our links have moved to the top of the page because we've taken when we position fixed. It takes the canvas out of the flow of the document flow. Um, and I'm just going to say z-index of two, and we want pointer events to be none. Okay, so pointer events none. This allows us to click through the canvas. So when we click on it, it will have no effect, but it will go through to any underlying links. Okay, so that's it for our canvas. I'm next going to select the section, so we'll just say a section here, and then we're going to position this relative like so, and then we can say padding. I'm just going to give this some padding over 10 viewport heights from the top and two viewport widths from the right for the right and left. So when you have two options here, this will be ten viewport heights from the top and bottom and two viewport widths from the right and the left. Okay, so now you can see we get that that

padding applied. Um, I'm just gonna actually add. Let's just, yeah, we want all our text to be this green color. So, I just can't see the globals here. I'm just going to say uh the d8 fa three zero. It gives us this lime green color, which I think is pretty cool. Okay, so next thing I want to do um. So, we've got that on our section. Uh, I'm next just going to set the height of our section to be 100 and 100 viewport heights. And we'll set the width to be 100 if you pull whips like so. Okay, so now that's it for our section. Underneath this next one I do is um. We're going to get the uh li. Okay, so we say li so that our list elements, our list items. And we're just going to say position relative again. And underneath this we'll just say ball the bottom builder bottom like so. And I'm going to copy this green here, but I just want to um, you know, make it a bit more opaque. So, we'll just set the

opacity down here using this bar in VS Code. Okay, and then what we need to do here as well, um, is I'm just going to set the cursor to pointer. Okay, as you can see now, we've got the pointer, um, and then, okay, so then what else I need to do here is I just need to select it. If you remember, we had this projects div here, so we just need to adjust the sizes for this as well. So project, so say dot project for the class, and then we'll just say width of 100 and a height of 100 percent, like so. Okay, so I think, you know, now if we come to our project ul next, okay, so say dot projects should be projects as well, so say projects under here. Let's just say projects ul, and then we can just say here, um, I'm going to display this in with flexbox, okay, and then we need to adjust the um direction here. So I just say flex direction, and we'll say column, so they're positioned in the column format, like so, and then we'll just say width again of

100 like so and a height of 100. Okay, and then we'll just say justify content here. There's space between, and that should space them out evenly like so. Okay, um, okay, and we just need to, with this border, we need to put one pixel solid on that side. Okay, so why is that not coming up? That should be just li like so. Okay, and then I'm also just going to set um, the font size here as well. So we'll just say uh, font size. I'll just set this to 6.2 vw. Okay, so that just increases our font size relative to the screen width. Okay, um, and then I'm also just going to set the font weight as well. So say font weight 400. Okay, so there you go. There's our sort of list so far. It's looking okay. Um, next thing I want to do here. I might drop that down actually just to six. Okay, so next we want to do um, is I think we're pretty much there really. So oh yeah, I'm just gonna set next we're

gonna have a project image. Okay, so we just have the last thing, uh, project. I have an image, and I'm just gonna set the opacity here to be uh, zero percent because I don't wanna see these images. Um, and then also position absolute so these images, these project images we're going to create with JavaScript, they're just going to be used as a reference, okay, for the canvas which we're going to be used to display these images when we hover our menu, okay. And then we just say, I'll just position these out of the documents. I'll just say top minus 100. Let's take them out of the document. We'll just set the point events to none as well so there's no interaction with those images. And we just say users select none as well, okay. Um, I'm also, while we're here, I'm just going to be using, so this is a font. You can use like a pixelated font, but I prefer the one I've actually purchased from that pen ground website, so we're just going to implement that now as well.

so to do that, I'll just say need to come above our global settings here, and I'll just say at font face like so. And here, so it's new bit. So I just in the name, I put new bit like so. And then we'll just direct it to the source. So it's this new bit waft2 file. And I just specify the format after I say format wolf 2 like so. And then I can use this here. So I'll just say n-e-u-b-i-t in the font family. And now you can see we've got that. This is just another version of a pixelated font really, which I quite like. Okay, so that's cool. That's looking good. And that's it for style.css. Let's move on to JavaScript now. Okay, so the first thing we want to do in our JavaScript file is I'm just going to get our canvas. So we'll just say const canvas. Okay, and that's going to equal a document.queryselector. And we'll just select that canvas.

element okay, like so, and then we need to use it to get our context for the canvas as well. So just say const ctx for context equals, and we just get that camera might seem capitals. Okay, so const ctx equals canvas.getContext, and we're just going to use a 2D context. Okay, to draw to the canvas. Okay, and then the next one we'll do is just get all of our actual links or projects. So let's do that. I'm just going to say const links equals. We use an array in the spread operator here. I'd say document.querySelectorAll, and we just want to create all of the li elements on our page. Okay, so now if we console.log canvas, and if we console.log links, come to our console in here, and then you can see we have our canvas there. So that's showing. That's great. And then we have each of our six links here as well. Okay, so that's working good. Um, so the next thing we want to do here is I'm just going to

come out. This will delete these console logs. I'm going to create first. So we just want to have a lerp function. Okay, so function. And this is going to be used to just kind of when we move our mouse. It will, the canvas will follow our mouse movements. Okay, but there'll be a slight delay because we're using like this alert function to smooth the moving animation. It looks more professional than rather just being, you know, the canvas moving linear with the mouse move. Okay, so this alert function I've used in previous videos. It takes in a start position. It takes an end position. And it also takes in a time variable as well. Okay, and the um to yeah. So the equation to get this function working is we want to return start times one minus t. And then we want to add end times t like so. Okay, so just to give you an example. If we just say lerp console.log lerp. And we're just taking a start, which is I know 10, an endpoint, which is 20. And if we have a

time. So, if we want to, you know, have 0.5, so what this learned function will do, it will take this as the kind of percentage you want to work out between the start and the end. Okay, so obviously halfway between 10 and 20 is 15. Okay, so we should have 15 logged to the console now. So, if we go to our console, you can see there's a number 15. Obviously, 80 percent, if we do point A, that will be 18. Okay, so that's how this function works. We're going to be using this in our animation frame to gradually decrease this and make that canvas animation smooth. Okay, so that's our alert function. Next one I'm gonna do here is we just want to loop over all of our links. Okay, so I'm just gonna say we'll do a for loop here. I'll say for let i equal 0, and y i is less than our links dot length. We're just going to say i plus plus. Okay, and then what we want to do here is just say

links i okay so for each iteration for each link we're going to add an event listener okay and we want this no for a mouse over on each link mouse over like so and then we do an arrow function here and then we're just going to say here we're going to do an actual another for loop okay so say four let j equal zero and whilst j is less than links um dot lymph then we'll just say j plus plus okay and then what I want to say here is if um j is not equal to i okay so I'll explain this in a minute if j is not equal to i what we want to do is we want to get our links uh the the j iteration of our link and we just want to set the style dot opacity um to equal 0.2 and then we also want to set the links uh so that for the link want to start the style as well style dot z index as well we want to make that equal zero okay and this will allow the canvas

to appear in front of all the um. These are all the links which are not hovered, okay? So, that's why we're setting the opacity to two. And then else, so if this, this is if the link's not hovered, okay? Else, if it is hovered, want to set the links, uh, the link we're hovering. We're gonna set the stop style dot opacity to equal one, okay? And then we also just want to set the z index as well. So, say links j dot style dot z index equals free, okay? So, now you'll see when we hover our link, uh, the one we hover is lit up, but the others, they go to a opaque. We also need to just um, add a mouse leave as well, okay? So, underneath this, I'm just going to say links i dot add event listener. I want, we'll list that for the mouse leave this time. This is when we leave our links, or if for each link when we leave it, then we're just going to say uh, we'll do another four loop actually. So, I'll just say four.

um you could do a 4-h loop here, but I'm just going old-school here with the uh old-fashioned for loop. Just say i is less than links dot length, let's say i plus plus again, and then here we'll just say links i dot style dot opacity equals one. Okay, that will make all the links a luminous again. Okay, so now you'll see when we come out, when we leave the link, they all light up again. Okay, so the one we hover is lit up, and the others are all faded. Okay, so that's how you get that kind of effect. Okay, so that's it for that initial for loop of our links. So now we can move on to um, let's just move on to let's get some images loaded now. Okay, so come underneath this comment here, say load images into an array for reference. Okay, so what we're going to do here, we're just going to use an array here, so say const images equals, and here we're just going to add the location for each of our six

images. Okay, so remember we had this images folder here. So what was I'm going to do here is just going to say dot forward slash images forward slash one dot jpeg. And then I'll just copy this down five times, change these, okay, so two, three, four, five, six. I mean, that's why I've named my images one, two, three, four, five, six here, just to make it simple. Um, okay, so that's our images array. And then we also just want to create another image array that we're going to add in our program going forward. So I just say let image array. You'll see by using this shortly, just to make that equal an empty array for now. Okay, so next thing we want to do here is I'm actually just going to set um, an image index as well. Okay, so we'll say um, actually I'll do that above here. Let image index equal for now. We'll set that to zero. Okay, and this image index number, this is going to be changed depending on what a link. So if we hover the first link for

example the index will be zero. The second index, the index will be set to one with our program, and this will allow our canvas to know which image to display in the canvas, okay? Because it's going to be using this image index, and it's going to refer that index against this array, okay? And it will then know what an image it needs to draw to the canvas. Um, come underneath this. I just want to next stem select some canvas movement variables, okay? Let's move variables, okay? And this, these are going to be the variables used to move our canvas with our mouse move, okay? So, the first one we want to do here, we're going to say let target x equals zero, let target y equals zero, and these are going to be the um, where our mass is on the x and y axis of our page, okay? That's what these target variables are going to be set with. And then we're going to say let current x equal zero, and let's current y equals zero, okay? And we're using these current variables because we're going to be

using the alert function to gradually smooth from the current position to the target position. Okay, so that's why we have these four different variables here. And then the next one I do here is when I say window dot add event listener, listen up for the mouse move event, mouse move like so. And here do a callback function. We'll take pass in the event as well so we can get our mass coordinates. And here we're just going to say target x equals e dot client x and target y equals e dot client wire. Okay, so now if we um if we console.log target x and target wire, you should see now we get the mouse coordinates listed there in our console. You see, so if you go to the top, you'll see yeah we get you know pretty much zero zero or zero one pixel. So that's that last coordinates and that's what we're going to be used to to move our canvas with our mouse. Just delete that console log. Okay, so next we want to do here is I'm next going to say um we want to loop for

our images array next okay. So if we come under here, and what we want to do with these images, we're just going to say images. So I'll use the forEach method this time. I'm just going to say forEach, okay. And with the forEach, we can pass in the actual image itself, okay. So remember, we're looking for these images, and we're passing in this address to our image here, image. And we can also pass in the index that's passed in with a forEach function, okay. So then we can do an arrow function out of that, and we're going to create an image element, okay. So we'll say let image equal new, and with JavaScript, we'll create a new image class here, okay. And that takes in a width. I'll just say a specified arbitrary number for now, 300. And then we can set the source of this image. Next, we'll say image.src, like so, and that's going to equal image, okay. Remember, we pass in the source here in this array, so that's how we can just

say image here because we pass in that source there in that first argument or parameter. Okay, and then we can say l image dot class list dot add, and then we just want to add the class of project image like so. Okay, you remember in our CSS, we specified that there that all these project images would have an opacity of zero and that'd be positioned out of the document, so top minus 100, and there'll be no point events. Remember, these images are just attached to our documents just so our canvas can reference them when we hover our menu. Okay, um, and then we'll just say document dot body dot append child. I want to append that l image, okay? And then we'll just say, remember that images array we created, so image array, and I'm just going to say dot push the l image like so. Okay, so now if we go to our, you can see here the images have been added to that, to our document, and then if we just do the image array, you'll see we have an our array there of six images like so. Okay

but they're positioned above the screen, so we won't be able to interact with those. Okay, so now next we want to do here is we're going to next create a function, okay, to draw these images to the canvas. So let's do that. Come under here, okay. So let's just say draw images to the canvas, okay. So with this, we'll just say function, and we'll just say draw image, and that's going to take in an index for our image, okay, so it can reference the array that we're currently for the list item we're currently hovering, okay. So we'll do that, and then I'm just going to say the first one to do here is get the width and the width and size of the image, so that the actual width and height of the image, just so we know how big we need to make our canvas, okay. So it'll adjust the canvas size depending on the size of the image. So to do that, we'll just say let. We're going to use destructuring here.

we'll say width and height, and that's going to equal, and here we'll just say image array. We'll take in that index that we passed in here like so, image array index, and we can say dot get bounding client rect like so, okay. And then after that, we just need to set the canvas width, so we can say dot canvas width, and that's going to equal um the width we have for our image that we just got here, so we say width, and then we just want to times this by the window dot device pixel ratio, okay. And what this will do is sometimes you may notice on the canvas when we're using a retina display, for example, that the images look a bit blurry, so what this will do is this will just times it to the device pixel ratio, okay. And it will, this will give us a clearer, it'll make it the canvas image display clearer for all um, for all screens and monitors, okay. We need to do the same thing with the height, so we'll just say canvas.height equals, let me just say the height here.

times the first pixel ratio as well. And then what this will do, I mean, this will tend, if we just, uh, if I show you here, so window.devicePixelRatio, yeah. So we have a device pixel ratio of one here, okay. I think it's usually like this, isn't a retina display, but if using like a MacBook Pro, I think is usually like 1.5 or something like that, or two. So that's why we have to take this into account, okay. So underneath this, next we need to do is this will make the um, the width a bit bigger, okay. So what we need to do is just bring that back down to its actual size. To do that, we just say canvas.style.width, and that's just going to equal, use some back ticks here, and I'll just say width pixels like so, okay. And then we do the same thing for the height as well, and this should give us a sharp clear image that is the actual image size, okay. Let's just say height like so, and this is why we had to append

the images to our body just so we can get this um this get bounding clamp right just so we can get the width from the height of the images okay just so the canvas can reference those width and height variables and apply them accordingly to the canvas size okay and then what we need to do here as well is we're just going to say um we need to pixelate the images okay pixelate the images by uh disabling uh the default smoothing uh applied okay so to do that i'll show you i'll show you the example what this does soon but what to do is just say ctx dot webkit webkit image smoothing uh enabled okay and that is going to be set to false okay let me show you enable false there's um a few these are all the same function but it's just to make it compatible on all browsers really so it's just the image smoothing enabled equals false as well and then for microsoft we'll just say dot ms smoothing enabled equals false and then finally we'll just say ctx

dot image smoothing enabled equals false like so. Okay, so that should be it, and that should disable the kind of smoothing just so we get more pictures and more of a pixelated effect for this image hover effect. Okay, so what I need to do here as well, if we just come above this function, we just need to set two global variables. Okay, so I'm just gonna say let percent equal zero, and we just say let target equal zero as well. Okay, and we're going to adjust these in the function next. So what we need to do here is I'm just going to say basically if our target is equal to 1, that means that a link's going to be hovered, and okay, and we want the image to smooth in from a pixelated effect to a clear image. Okay, so let's do that. We're going to set two speeds here. Okay, so I'm just going to say two speeds, and this will become clearer soon. Okay, so I'll show you what this does later when the effects actually roll in, but

for now, just bear with me and make the effect more gradual, okay? So, to do that, we're just going to say if, so if we're hovering a link, the target will be equal to one, and we're just going to say if the percent is less than 0.2, then we want to increment our percent [Music] by 0.01 percent, okay? Um, then we can say here, else if, uh, percent is less than one, okay? Then we just want to increment it a bit quicker, okay? So, just say percent plus equals 0.10 percent, okay? So, I'll make the effect quicker, um, and then here we can also just say else if [Music] target is equal to zero, then here we'll just say again we use two speeds again, so we just say if the percent is greater than 0.2, so 20, then we'll just say percent minus equals this time 0.3, and then we can just say here else if percent is greater than zero, then we'll just say percent minus equals 0.01 again.

Okay, so it's pretty big confusing for now, but you'll see. I'll talk this over when we get the actual effect occurring on our screen, okay? And then the next one we need to do here is we need to set a scaled width, okay? So we'll say, let scout width. That's going to equal width, the width we received up here with our get gap get panning cloud rect function. And then we just want to times that by the percent, okay? That we've worked out here, okay? And then we'll just do the same for the height as well. So say, let's scale height. This is what we use to get our pixelated effect, okay? So we just say height, okay? And then what we can do here, I'm just going to say if, we'll do another statement here. We'll say if percent is greater than or equal to one, close that space. We'll just say ctx. I'm going to use the scale function here, scale. And we just say we want to take in the window device pixel ratio. And again, we'll take that in as well.

window, so for the um, why we take the device pixel ratio as well. That's what we want to scale our um context by. And then we're just going to say ctx.dot draw image. And I'm just going to say so for the image. We're taking the image array, okay. So for the source. And we're just going to pass in the index that we um be passing at the top of the function. And then coming out of that. So the dx number will be zero. And the dy number will be zero as well. And then we just want to add the width and height at the end of these as well, okay. And then we can come under here and we can say else. And here we just say ctx.dot draw image again. That should be ctx. And here we just want to take in the image array index. And then we'll just say 0, 0. And for this one, we'll just say that scaled width and the scaled height like so, okay. And then um, we just need to scale. We need to take this same scale function again and place

that this line here and we'll put it underneath here like so. And then I also just want to say here we'll do an if statement. We'll just say if the canvas dot width um is not equal to zero and the canvas dot height is not equal to zero. That means we have a canvas to or an image to draw. And we can just say ctx dot draw image. And I'm just going to say we're passing the canvas itself and then zero zero. And again we'll take the scaled width and then we'll say the scaled height as well. Okay. And then we also just need to add zero and the zero and the width and the height at the end there. Okay um. And that's it. So it's quite a long function. So basically what's going on here is we're saying um we pass the image source into our drawer image function. We extract the width and height. We set the canvas width and height to be uh that the width of the image times the device pixel ratio. We then scale it back.

down to its original size, okay, and then we're disabling the smoothing effect for this, so we get a more pixelated effect when we hover our items. And then we're basically saying here, if the target equals one, this means a link has been hovered. So we need to basically move the percentage of our image viewability up, okay? So if target equals one, we're saying basically we want to increase the percentage. And we've got two speeds here because when it's below 0.2, we just want a slow increment just so we can see the pixelated effect more. And then when it's above 20, it will basically just increment it really quickly so we see our image reveal a lot very quickly. After that, else if the target equals zero, if that means the link's not hovered, and then we'll just gradually decrease the visibility percentage of our canvas, okay? So with the when it's greater than 20, we decrement, oh yeah, we decrease the percentage by 0.3, and then when it gets

to below 20. We just, uh, do a gradual, um, yeah, decrease there by 0.1. Okay, okay. And then what we're doing after that is we're getting the scaled width of our image. So we're just to get that the scale of it from height. We just times the width and height by the percentage we set here. And then again, we're saying, you know, if percentage is greater than or equal to one, uh, then we, um, we basically just scale. We just scale the m context by the window.pixel ratio. And we draw the image as it is clearly. Else, we're just going to say draw the image first. Okay, um, using the scaled width from the scaled height this time. So this gives us that pixelated effect. We're scaling it to the relevant size of the screen again. And then what we're saying here is if we have an image to draw, if we have a, if, if, if we have a canvas displayed, then right. So we're just redrawing that canvas and we're just applying the scale width and

height and the usual width and height. This will give us that kind of pixelated effect. Okay, so now what we want to do here is we're just going to say I want to look for all of our links again. So just say links.forEach. Actually, we could probably do that up here, you know. So I will links.forEach. Other just for the sake of I'll just do it under here for now. You can type this up later. Say for each link. And again, we pass in the link and index here like so. Okay, and then what we want to do here is I'm just going to say link.addEventListener. I'll list that for a mouse enter like so. And here I'm just going to say let's just say imageIndex equals the index. Okay, so that's what we're doing when we enter the image. It will take the image index and it will apply it to that image index variable just so our function knows which image to use. And then we're setting the target.

to equal one, and that's what's used here, okay? So, we're just saying here, if the target equals one, then it will increase the percentage gradually. Um, so that's it for our mouse enter. Now, just say link dot add event listener, um, mouse leave, and here I'll just say, um, we'll just set the target to equal zero, okay? And that will just, uh, gradually fade out the image in a pixelated manner, okay? So, we're nearly there, guys. Let's just, um, create one last function next. This is going to be called animate, say function animate like so, and what want to do here. So, this is for our mouse move. We just say current x equals, we use that alert function, and we'll just say current x. So, that's the starting position. The target x is the um, position we want to go to, and then we'll just say 0.075 for the percentage increase, okay? Um, we'll do the same kind of thing for our current wire position as well, so I'll just say current wire equals lerp current wire.

target wire like so. Next one I do here, I'm just going to say, let me use that d structure, and again, let's width height, okay? And that's going to equal our image index, um, image array, sorry, image array. Uh, and then we want to get the image index variable, so that's the index we currently hovered. And then we'll just say dot get bounding client rect like so. And then here, we're just going to say canvas dot style dot transform equals use back ticks here. We'll just say translate 3d, and the first um is the x position for our canvas. So we want to do the mouse move. We'll just say current x here. It's a current x, and then we just need to subtract the width of the image divided by two, okay? So this will keep the image centered to the mouse. That's what we're doing this. And then just add pixels after. And then for the uh, yeah, for the um, the wire position, we'll do the same things. We'll just say um current wire this time, and then we just say minus height.

divided by two, divided by two, and then don't forget to add the pixels after. And then for the z-axis, which just say zero, okay cool. So next we want to do here, um, kind of underneath this, we're just going to say um, just want to draw, let me use that draw image function next, just say draw image, and then we want to pass in the image index. Remember with our draw image function, we pass in the index of the image we want her to add to use for our canvas. And then we'll just say window dot request animation frame um animate. So we'll call it over again, and then coming out of here, we'll just say animate like so. Hopefully this should work. You can see now we get that cool pixelated effect when we hover our links, okay. I mean, this could be tied up, I think to be honest. We should be, I should be adding this uh, this mouse enter a mouse leave to, because we already had this up here. So let me just then bring this down actually, and um, we can add that just to tidy up.

the code a bit because I don't want to be using excess lines here. So to do that, we can just say um yeah, we'll just copy this. So say links uh, I had event listener um, and let's just copy this. Okay okay, and then we'll just do the last one for the mouse leave. So I'll just say links, I add event listener, and then yeah, let's just copy this. And then if we comment that out, should hopefully still work. Got an error here, index is not defined. Okay um, oh yeah, okay, so that should be all right. Okay yeah, that works. So let's just um, delete this. Okay, so that's pretty much it guys. Let's um, make this a bit bigger so you can see. Yeah, I think it's a pretty cool effect when you uh, however you get that kind of pixelated. It looks pretty cool. I think I'm using the canvas here. Follow the mouse button, you can see we get our kind of delay when we move our mouse as well. That's the learnt function. Okay, so it's

not linear to the mouse move, but yeah. I hope you enjoyed this, guys. Thanks for watching. Um, yeah. Any comments or any questions, please give me a comment. I know there's probably quite a lot of code for that JavaScript, and it took me a while to figure out this effect, but I really wanted to achieve it without using kind of pixelated images. When I didn't use the canvas, it's quite a powerful tool. Yeah, thanks for watching, and I'll see you next video. Cheers.

Vanilla JavaScript: Creating a Cool Pixelated Image Reveal Effect on Hover

Conor Bailey

The project involves creating a menu list with a pixelated image effect that follows the mouse movement, using linear interpolation for smooth animation.

The tutorial includes setting up HTML, CSS, and JavaScript files, along with downloading random images and using specific fonts for a modern look.

The JavaScript code creates image elements and applies the pixelated reveal effect, with active images appearing above the others during hover.

The code implements a lerp function to create a smooth canvas movement that follows the mouse cursor with a slight delay.

An array of images is set up, and an image index is used to change the displayed image based on the hovered link.

The mouse coordinates are captured to update the canvas position, and the movement is further smoothed using a percentage-based approach.

The function calculates a percentage between a start and end value, which is used to determine the position of an image in an animation.

A loop is implemented to add mouseover event listeners to links, changing their opacity and z-index for a visual effect.

The canvas's width and height are adjusted based on the device's pixel ratio, and the image is drawn on the canvas with scaling applied for a clear and sharp image.

Creating a Pixelated Image Effect with Canvas

Images are added to the document with zero opacity and positioned out of view, while an array is created to store these images.

The HTML structure includes a canvas for displaying the images and a section for the project images, with image smoothing disabled for a pixelated effect.

Event listeners are set up for the links to determine the image index, and a function is created to draw the images on the canvas based on the hovered link.

The code sets up a pixelated canvas effect by scaling the width and height based on a percentage.

It uses mouse movement variables to control the canvas's position and applies a green color to the text.

The layout is structured with list items, and the font size and weight are adjusted for a responsive design.

Implementing a Pixelated Image Hover Effect

The image smoothing effect is disabled to create a pixelated look when hovering over links.

The visibility of the image is adjusted based on the hover state of the links, with a slow increment for low percentages and a quick increment for higher percentages.

Global variables are used to control the hover effect, and the canvas context is set up to draw the images, while the links are selected using the spread operator.

The tutorial outlines how to create a pixelated image hover effect using JavaScript and CSS.

It involves drawing images on a canvas, using mouse enter and leave events to fade the images in and out, and positioning project images absolutely to avoid document flow.

The project images are created with JavaScript and are used as a reference for the canvas, while the CSS is used to style the project links and the canvas section.

The tutorial focuses on creating a canvas image effect using JavaScript, aiming to avoid pixelated images.

The canvas width and height are set based on the image's dimensions and the device's pixel ratio to ensure a clear display.

The tutorial also includes styling and scrolling functionality for the webpage.