0.0.8 • Published 6 months ago
notacursor v0.0.8
notAcursor Project
notAcursor library allows you to easily transform your ordinary cursor into something extraordinary in web pages.
Installation
CDN
To use notAcursor >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.css">- Copy and paste this link on your html head tag.
And >
<script src="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.js"></script>- Copy and paste this to your body tag at the end.
Installation Done! Now to implement Cursor effect >
notAcursor-type1
<!-- notAcursor-type1 -->
<div class="notAcursor-dot-type1" data-notacursor-dot></div>
<div class="notAcursor-outline-type1" data-notacursor-outline></div>- Just copy and paste it to anywhere in your .html body tag.
- This one is type1, To use type2 simply Change type1 to type2 >
notAcursor-type2
<!-- notAcursor-type2 -->
<div class="notAcursor-dot-type2" data-notacursor-dot></div>
<div class="notAcursor-outline-type2" data-notacursor-outline></div>More notAcursor Types are given below >
notAcursor-type3
<!-- notAcursor-type3 -->
<div class="notAcursor-dot-type3" data-notacursor-dot></div>
<div class="notAcursor-outline-type3" data-notacursor-outline></div>notAcursor-pic
- Use your random pic or gif as cursor.
- Just replace your_pic.png to your actual photo, Like abcd.png or abcd.jpg or abcd.gif
<!-- notAcursor-pic -->
<div class="notAcursor-dot-pic" data-notacursor-dot></div>
<img src="your_pic.png" alt="Cursor Image"
class="notAcursor-outline-pic" data-notacursor-outline>notAcursor-minecraftSword
<!-- notAcursor-minecraftSword -->
<div class="notAcursor-dot-minecraftSword" data-notacursor-dot></div>
<img src="https://ik.imagekit.io/iamovi/notAcursor/minecraft-sword.png?updatedAt=1701079351519" alt="Cursor Image"
class="notAcursor-outline-minecraftSword" data-notacursor-outline>notAcursor-apple
<!-- notAcursor-apple -->
<div class="notAcursor-dot-apple" data-notacursor-dot></div>
<img src="https://ik.imagekit.io/iamovi/notAcursor/apple.png?updatedAt=1701079346488" alt="Cursor Image"
class="notAcursor-outline-apple" data-notacursor-outline>- Check notAcursor-types.txt file.
Important Note
To show default Cursor >
html, button, a {
cursor: auto !important;
}- Add this on your .css file.
If
You change background / background-color to darkish color in body, then notAcursor-type1 and notAcursor-type2 may not be visible Cuz it's also dark. To fix this >
/* to show notAcursor in dark background */
.notAcursor-dot-type1,.notAcursor-dot-type2{background-color:#fff !important}.notAcursor-outline-type1{border:2px solid hsla(0,0%,100%,.5)}.notAcursor-outline-type2{border:3px solid hsla(0,0%,100%,.5) !important}- Copy and paste this code to your .css file And done >
Quick Start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>notAcursor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.css">
<style>
button {
background-color: aquamarine;
cursor: pointer;
display: block;
border: 1px solid black;
margin: auto;
margin-top: 150px;
padding: 10px;
}
button:hover {
border-radius: 10px;
}
</style>
</head>
<body>
<!-- notAcursor-type1 -->
<div class="notAcursor-dot-type1" data-notacursor-dot></div>
<div class="notAcursor-outline-type1" data-notacursor-outline></div>
<button>Test ME!</button>
<script src="https://cdn.jsdelivr.net/npm/notacursor@0.0.8/notacursor.js"></script>
</body>
</html>Visit notAcursor Website for more information.
License
This project is licensed under the MIT License.
Author
Maruf OVi
fornet.ovi@gmail.com
I tried to made this readme as easy as possible for reading and understanding. If you come across a bug, have a question, want to propose a new feature, or just want to chat, feel free to contact me or report an issue.
Tysm for reading 🌸.