Prest-o! Your newly created cursor element is now your main cursor. The reason for using this method instead of an on-element interaction will be clear later. Now we’re going to create an interaction that will be a trigger for the whole page. Voila! Your beautiful cursor is ready to be used! Creating an interaction Borders: solid 2px line with the color of #f07 (we may make it transparent so that it doesn’t get in the way too much).Position: absolute (do not align it in any way or the centering will be off).The outer circle is a div with these parameters: Border-radius: 50% for the perfect roundness.The inner dot is a div with these parameters: Since we’re going to create a slightly complex cursor, the object will consist of two elements: an inner dot and an outer circle. Now we’ll create the actual cursor object. We centered the cursor’s children to create the interaction that follows the pointer device. This div will contain our always-on-top cursor. Z-index: 100 (this has to be the highest number on your site). Setting the scene and creating our elementsĬreate a cursor-wrapper div with the following parameters:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
January 2023
Categories |