Started all right so here I have created this folder called Spotlight effect and I just opened it with vs code now let's goe and create the necessary files so let's create a new file called.
Index.html and let's create another file called style.css and let's also create one more file called main.js and let's start with the.
Index.html file now in vs code you can just press exclamation and press Tab and you'll have this basic HTML file code right let's link our CSS file over here and let's link the Javascript file over.
Here in the body right now let's start with the content of our website so we'll just create this basic web page where we have this heading this image and this paragraph So.
I'll just create an IMG tag and for the source I'll just get an image from pixabay so you can just go to this website called pixa.com and you can search for free images over here so I'll.
Just search for technology let's scroll down and uh let's get an image from here I'll just get this image right here let's go ahead and copy the link of this image so let's click on copy image.
Address and let's go back and let's paste it over here inside the SRC right now let's go ahead and create the paragraph so I'll just create a division for that I'll just give it a class name.
Of description and and let's create a paragraph and let's Ty lurm 20 for 20 random words and let's create one more paragraph and let's tap Lam 40 and uh now let's go ahead and create a division.
For the spotlight effect so I just create a division with a class of revealed area so this division will be responsible for displaying the content.
Posts Related:
- How To Add Video As A Background Using HTML & CSS - Live Blogger BlogSpot
- How to Extract Data From Unlimited PDF Forms To An Excel Table IN ONE CLICK
- VBA to add data to SharePoint. ADO and SQL. SharePoint Automation using VBA - 3
In the specific area of the mouse - ID Card Make
Pointer right now let's go ahead and style this so let's go to style CSS file and uh let's target the main container Division and first of all let's set the.Font family and let's set it to Roboto and sanserif and let's set the max width of the element to 700 pixels and let's bring it to the center.
By typing margin Z Auto now let's go ahead and open this in our browser so I have this extension called live server installed in vs code so once you have this installed you can.
Just right click over here in the HTML file and click on open with live server and here we can see that our content is displayed over here in the browser let's go back and uh let's continue styling.
This right now let's go ahead and style the image so let's typ main container IMG and let's set the width of the image to 100% and uh let's set the height of the image to 240 pixels and let's also.
Type object fit to cover so that it has the correct proportions and we'll also add a border radius for rounded corners and I'll just set the value to 10 pixels and now if you go back here we can see.
This is how the image looks right now let's go ahead and style this heading so let's start main container H1 and for the heading let's set a font size of 90 pixels and let's set the.
Margin to 24 pixels top and bottom and zero for left and right and let's set the color of the heading to ef2 2 33c and this is the heading now let's go ahead and style this paragraph So let's.
Go ahead and tap main container p and let's set the line height of the paragraph to 1.8 so we have this more space between each line of text and uh then let's type font size and let's set.
It to 18 pixels and now the next thing
We need to do is we need to add two columns for this content so here we can see the content is in two columns so for that we can Target the container.Division which is description so let's type main container description and we can simply type column count and set it to two and now we can see that there are two columns.
Now here we can see that the text of this column is shifted to the top so let's go ahead and remove the margin of the paragraph and let's add a margin.
Bottom and let's edit to let's try 16 pixels and now for the description we can add a margin top so here let's tap margin top and let's try 24 pixels and I think that looks all right so that's.
Basically with the styling of our website now let's go ahead and add this element called revealed area so we have already created this division over here so let's style it so let's typ.
Revealed area and first of all let's set the position to fix and uh let's tap inset zero so that the top left right and bottom positions are set to zero so it has the full width and.
Height and now the next thing we need to do is we need to set a background and we need to set it to radial gradient and here we need to create some values where at the center the color should be.
Transparent and as we go outside this circle the color should be black so let's go back and and uh here let's type Circle and let's set the size to 280 pixels and here you have to type at and.
Here you to add the position so let's T 50% 50% to start from the center and then we need to add the coma and then we need to type transparent let's add a value of 10% and.
Then we need to type rgba and let's set the color value to 0 0 0 and for the opacity let's tab 0 point let's try 98 and now if you go back to our website here we can see we.
Have this effect where we have the revealed area displayed now the last thing we need to do is we need to move this revealed area based on our Mouse pointer position now before that let's.
Add one more line of CSS so right now if I select this text it is not being selected so let's go over here and here let's Ty pointer events to none so we are say setting the.
Pointer events of the revealed area to none so now we can go ahead and select this text right now let's go ahead and write the JavaScript to move this revealed area based on the mouse pointer.
Position so let's go to the main Ro JS file and uh let's tap document do add event listener so we are adding an event listener to the document and here we need to listen for the mouse move event.
So whenever the mouse moves this event will be fired now here let's go ahead and create create a function and here the first thing we need to do is we need to get the.
Position of the mouse so let's create a con called Mouse X and let's set it to e so here we'll get some values I just call it e you can name this anything you want and let's tap e do client X this is.
One of the values that we get from E and let's tap const Mouse y equals e do client y now let's go ahead and calculate the center of the radial gradient so let's St qu and I'll just.
Call it gradient Center X and let's set it equal to Mouse x divided by window do inner width so this will give us the width of the browser window time 100 and let's do the same for gradient Center y.
So let's type equals Mouse y divided by window do inner height * 100 and now the last thing we need to do is we need to update this value so first of all we need to reference this revealed area so.
Let's type const revealed area equals document. query selector revealed area and let's type revealed area do style do background equals so let's go ahead and copy this value from here and.
Uh let's add it inside backx and now you need to replace these two values with this gradient Center X and gradient Center y so since we are using.
Backx we can just type dollar symbol craes and let's type gradient X and for this one let's type dollar symbol calibra gradient Y and here want need to.
Add percent and now let's go ahead and test it out so so now when we move this mouse pointer we can see that the focus moves so the spotlight effect is working all.
Right so that's basically how you can create this Spotlight effect using HTML CSS and JavaScript all right so that's basically it for this video if you have any doubts you can ask in the comments.
Below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice.
day n.
