Component – Custom Cursor

A JavaScript plugin to replace the native cursor with a custom image.Download + DemoView DemoDownload ComponentHow To
Use this plugin to replace the native cursor with a custom image, and, optionally, animate it.
To connect a target element to a custom…


This content originally appeared on CodyHouse and was authored by CodyHouse

A JavaScript plugin to replace the native cursor with a custom image.Custom Cursor

Download + Demo

How To

Use this plugin to replace the native cursor with a custom image, and, optionally, animate it.

To connect a target element to a custom cursor, the ID value of the cursor should be equal to the data-custom-cursor attribute of the target.

<div data-custom-cursor="cursor-1" >
  <!-- ... -->
</div>

<div id="cursor-1" class="c-cursor js-c-cursor" aria-hidden="true">
  <svg class="c-cursor__img icon icon--lg" viewBox="0 0 48 48">
    <!-- ... -->
  </svg>
</div>

Make sure to include the .js-c-cursor element as the last element in your HTML page:

<body>
  <header>
    <!-- .... -->
  </header>

  <main>
    <!-- ... -->
  </main>

  <footer>
    <!-- ... -->
  </footer>

  <div id="cursor-1" class="c-cursor js-c-cursor" aria-hidden="true">
    <svg class="c-cursor__img icon icon--lg" viewBox="0 0 48 48">
      <!-- ... -->
    </svg>
  </div>
</body>

Cursor Classes #

The following classes are added to the cursor element:

  • c-cursor--in: added when the cursor is over the target element;
  • c-cursor--out: added when the cursor is outside the target;
  • c-cursor--left/c-cursor--right: added when the cursor is over the left/right half of the target;
  • c-cursor--top/c-cursor--bottom: added when the cursor is over the top/bottom half of the target.


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-12-09T14:34:38+00:00) Component – Custom Cursor. Retrieved from https://www.scien.cx/2021/12/09/component-custom-cursor/

MLA
" » Component – Custom Cursor." CodyHouse | Sciencx - Thursday December 9, 2021, https://www.scien.cx/2021/12/09/component-custom-cursor/
HARVARD
CodyHouse | Sciencx Thursday December 9, 2021 » Component – Custom Cursor., viewed ,<https://www.scien.cx/2021/12/09/component-custom-cursor/>
VANCOUVER
CodyHouse | Sciencx - » Component – Custom Cursor. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/09/component-custom-cursor/
CHICAGO
" » Component – Custom Cursor." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/12/09/component-custom-cursor/
IEEE
" » Component – Custom Cursor." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/12/09/component-custom-cursor/. [Accessed: ]
rf:citation
» Component – Custom Cursor | CodyHouse | Sciencx | https://www.scien.cx/2021/12/09/component-custom-cursor/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts