자바스크립트 캔버스: 픽셀화된 이미지 호버 효과 튜토리얼

### 캔버스와 자바스크립트로 픽셀화된 이미지 공개 효과 만들기
* 🎨 이 튜토리얼의 목표는 HTML 캔버스와 JavaScript를 사용하여 **이미지가 마우스 움직임을 따라 비선형적인 방식**으로 표시되는 픽셀화된 이미지 표시 효과를 만드는 것입니다.
* 🖥 이 프로젝트에는 **캔버스 요소가 포함된 HTML 파일**을 설정하고 스타일링을 위한 **CSS 파일과 기능을 위한 JavaScript 파일**을 연결하는 작업이 포함됩니다.
* 🖌 CSS에는 기본 여백과 패딩을 제거하는 전역 설정과 캔버스 및 프로젝트 링크의 스타일이 포함되어 있어 **이미지 평활화를 비활성화**하여 이미지가 픽셀화되는 효과를 얻을 수 있습니다.
* 📐 자바스크립트는 캔버스를 선택하고 다양한 화면에서 선명도를 보장하기 위해 **디바이스 픽셀 비율에 따라 크기를 설정**하는 것으로 시작됩니다.
* 🖼 이미지가 배열에 로드되고 마우스 상호작용을 처리하기 위해 프로젝트 링크에 이벤트 리스너가 추가되어 **마우스오버 시 불투명도와 z-인덱스를 동적으로 변경**할 수 있습니다.
* 🔄 이미지 그리기 함수는 **마우스 위치에 따라 캔버스에 이미지를 렌더링**하고 **선형 보간을 사용하여 부드러운 애니메이션**을 처리하기 위해 만들어졌습니다.
* 💻 이 튜토리얼에서는 시각적 효과를 높이기 위해 **픽셀화된 글꼴과 이미지를 사용하는 것의 중요성**을 강조하며 JavaScript를 통해 스타일을 동적으로 조작하는 방법을 보여줍니다.
* 🚀 전반적으로 이 프로젝트는 여러 코딩 기술을 결합하여 현대적이고 매력적인 사용자 경험을 구현함으로써 **웹 개발에서 캔버스가 가진 힘**을 보여 줍니다.

캔버스는 마우스 움직임을 매끄럽게 따라가는 멋진 픽셀 이미지 효과를 만들어냅니다.

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

픽셀화된 이미지 공개 효과 만들기

이 프로젝트는 부드러운 애니메이션을 위해 선형 보간을 사용하여 마우스 움직임에 따라 픽셀화된 이미지 효과가 있는 메뉴 목록을 만드는 것을 포함합니다.

이 튜토리얼에는 HTML, CSS 및 JavaScript 파일 설정과 함께 임의의 이미지를 다운로드하고 현대적인 느낌을 위해 특정 글꼴을 사용하는 방법이 포함되어 있습니다.

자바스크립트 코드는 이미지 요소를 생성하고 픽셀화된 노출 효과를 적용하여 마우스를 가리키는 동안 활성 이미지가 다른 이미지 위에 표시되도록 합니다.

마우스로 부드러운 캔버스 이동

이 코드는 마우스 커서를 따라 약간의 지연이 있는 부드러운 캔버스 움직임을 만들기 위해 lerp 함수를 구현합니다.

이미지 배열을 설정하고 이미지 인덱스를 사용하여 마우스오버된 링크를 기준으로 표시되는 이미지를 변경합니다.

마우스 좌표를 캡처하여 캔버스 위치를 업데이트하고 백분율 기반 접근 방식을 사용하여 이동을 더욱 부드럽게 만듭니다.

캔버스 애니메이션 및 이미지 스케일링

이 함수는 애니메이션에서 이미지의 위치를 결정하는 데 사용되는 시작 값과 끝 값 사이의 백분율을 계산합니다.

루프를 구현하여 마우스오버 이벤트 리스너를 링크에 추가하고 시각적 효과를 위해 불투명도와 z-인덱스를 변경합니다.

캔버스의 너비와 높이는 디바이스의 픽셀 비율에 따라 조정되며, 선명하고 깨끗한 이미지를 위해 스케일링이 적용된 상태로 캔버스에 이미지가 그려집니다.

캔버스로 픽셀화된 이미지 효과 만들기

이미지는 불투명도가 0인 상태로 문서에 추가되고 보이지 않는 위치에 배치되며, 이러한 이미지를 저장하기 위해 배열이 만들어집니다.

HTML 구조에는 이미지를 표시하는 캔버스와 프로젝트 이미지를 위한 섹션이 포함되며, 픽셀 효과를 위해 이미지 스무딩이 비활성화되어 있습니다.

이미지 인덱스를 결정하기 위해 링크에 대한 이벤트 리스너가 설정되고, 마우스오버된 링크를 기반으로 캔버스에 이미지를 그리는 함수가 만들어집니다.

픽셀화된 캔버스 효과 구현하기

이 코드는 백분율에 따라 너비와 높이의 크기를 조정하여 픽셀화된 캔버스 효과를 설정합니다.

마우스 이동 변수를 사용하여 캔버스의 위치를 제어하고 텍스트에 녹색을 적용합니다.

레이아웃은 목록 항목으로 구성되어 있으며 반응형 디자인을 위해 글꼴 크기와 무게가 조정됩니다.

픽셀화된 이미지 호버 효과 구현하기

이미지 스무딩 효과는 링크 위로 마우스를 가져갈 때 픽셀화된 모양을 만들기 위해 비활성화됩니다.

이미지의 가시성은 링크의 마우스오버 상태에 따라 조정되며, 낮은 비율의 경우 느리게 증가하고 높은 비율의 경우 빠르게 증가합니다.

전역 변수를 사용하여 호버 효과를 제어하고 캔버스 컨텍스트를 설정하여 이미지를 그리는 동안 링크는 스프레드 연산자를 사용하여 선택합니다.

픽셀화된 이미지 호버 효과 만들기

이 튜토리얼에서는 JavaScript와 CSS를 사용하여 픽셀화된 이미지 호버 효과를 만드는 방법을 간략하게 설명합니다.

여기에는 캔버스에 이미지를 그리고, 마우스 입/퇴장 이벤트를 사용하여 이미지를 페이드 인/아웃하고, 문서 흐름을 방해하지 않도록 프로젝트 이미지를 절대적으로 배치하는 것이 포함됩니다.

프로젝트 이미지는 자바스크립트로 생성되어 캔버스의 참조로 사용되며, CSS는 프로젝트 링크와 캔버스 섹션의 스타일을 지정하는 데 사용됩니다.

이 튜토리얼에서는 픽셀화된 이미지를 피하기 위해 JavaScript를 사용하여 캔버스 이미지 효과를 만드는 데 중점을 둡니다.

캔버스 너비와 높이는 이미지의 크기와 디바이스의 픽셀 비율에 따라 설정되어 선명한 디스플레이를 보장합니다.

이 튜토리얼에는 웹페이지의 스타일 지정 및 스크롤 기능도 포함되어 있습니다.