So we need to ensure that we are not saving the same elements again and again. The exists in nearBy array check is required because the mouseover event triggers every time the cursor is moved and our logic will be fired every time the event fires. Why don't we save the elements first then loop over the array again.that would be donkey work tbh. We only move ahead with the element if it does not exist in the nearBy array then we finally apply border-image to the element. We check if the element is not null, then check if its class is win-btn or not, and also, we need to check if the element already exists in the nearBy array or not. Now, since we know how to find those 8 points, we will find elements on those points. ℹ: The origin of the screen is the top left corner and the left edge is the positive Y-axis and the top edge is the positive X-axis. So if p(x,y) is a point on the circumference of a circle on origin, with radius r, at a particular angle from the X-axis, the coordinates are calculated as follows Since these points lie on the circumference of the circle, we will use simple vector mathematics to find them. Since the max number of elements inside the grid, near the cursor, will be 4, we can check in all 8 directions around the cursor just like we do in real life! Obviously, option 2 looks less complicated but which points to check for and which to skip? Either we check for all points on the circumference.Your immediate question would be how exactly do we use this method to find surrounding nearby elements and what coordinates do we pass?įrom the figure, you might have guessed that we will check for points on the circumference of the circular region. So if the coordinates are valid, then the method will return the body or some other element inside the body. It returns the topmost element falling under the coordinate passed as arguments. The method is document.elementFromPoint(x,y) The bad news is that there is no method in JS to find elements in a certain region, but the good news is that there exists a method to find elements given a coordinate! I refer to this radius or distance value as offset in my code. When the cursor comes inside the grid area, we need elements surrounding the cursor up to a particular distance. Note: This is my logic and there can be a different approach for implementing this effect but after looking at existing implementations available online I can assure you that my approach is the clean, least complicated, and scalable unlike other hardcoded ones □. The grid layout has 3 items, the grid has the class win-grid and the grid items are of class win-btn. In CSS, I have used a CSS grid to layout the items, so that the design remains responsive. HTML code is pretty simple, a container div which will be the grid, and inside it are the items. This is how our output looks at this point Here is the initial code.Įnter fullscreen mode Exit fullscreen mode I started the basic setup by forking my own implementation of Windows button hover effect codepen and then adding the mouse events to the win-grid element. So, it is obvious that we will be working with mouse events, especially the mousemove event. The intensity of highlight on the border of items is based on the position of the cursor.As soon as it reaches a minimum distance from the item, the borders of those nearby items are highlighted.You can have a look at the final grid hover effect below. I highly suggest that you read the first part (Button hover effect) because I explain some essential CSS properties used in all these effects. ![]() ![]() Hello there, if you've arrived here after reading my previous post, I'd like to congratulate you as you already understand half of the code used in this effect□. Instead, if you are not a beginner, I request you to go through the content and provide your valuable feedback :) ![]() I have explained all the necessary basic concepts used in the effect in brief in this article So please do not ignore the article by its length. Note: The aim of writing this article is that readers of all skill levels understand maximum content. Selecting and Styling the right elements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |