1.0.2 • Published 2 years ago
@matoz/cursorjs v1.0.2
Cursor.js
iPadOS provides dynamic pointer effects and behaviors that enhance the experience of using a pointing device with iPad. This experimental library help you to achieve this amazing effect.
How to use
- Use
<script>
tag to load Cursor.js in your HTML file:
- UNPKG CDN:
<script src="//unpkg.com/@matoz/cursorjs" defer></script>
- jsDelivr CDN:
<script src="//cdn.jsdelivr.net/npm/@matoz/cursorjs" defer></script>
- Follow the exmaples below.
Supported Effect:
Highlight effect:
<button>
<img src="./assets/airplay.svg" style="margin-right: 6px" />
Airplay
</button>
<button>Material</button>
<button>Cursor</button>
<button>😂</button>
<button>😊</button>
This experimental version will only work with the default internal button style, we will make the button customizable in future release.
Lift effect:
<img class="icon" id="icon" src="./assets/Message.svg" alt="Message" />
<img class="icon" id="icon" src="./assets/Phone.svg" alt="Phone" />
Simply add
id="icon"
attribute to<img>
tag
Content effect:
<p>
With a content effect, the UI element or region beneath the pointer can
also change its appearance when the pointer hovers over it.
</p>
Since there is no way to get each line of text, you need to manually set each line.
More effects...
Contribute
Feel free to fork this repository and submit pull requests. Bugs report in GitHub Issues.
License
Cursor.js is MIT Licensed.