eye-on-it
v1.0.6
Published
A JavaScript library for tracking mouse movement and input focus.
Downloads
14
Readme
eye-on-it
Watch the position of the last letter entered in the mouse or input window.
Installation
Install from NPM
We can install Swiper from NPM
$ npm install eye-on-itWhen you use React
// import eye-on-it JS
import { initEyeOnIt } from "eye-on-it";
// import eye-on-it styles
import "eye-on-it/style.css";
const App = () => {
useEffect(() => {
initEyeOnIt();
}, []);
};Use eye-on-it from CDN
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/eye-on-it/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/eye-on-it/dist/index.min.js"></script>If you use ES module in the browser, there is a CDN version for that too,
<script type="module">
import { initEyeOnIt } from "https://cdn.jsdelivr.net/npm/eye-on-it/dist/index.mjs";
initEyeOnIt();
</script>Download assets
If you want to use eye-on-it assets locally, you can directly download them from https://www.jsdelivr.com/package/npm/eye-on-it
Add eye-on-it HTML Layout
Now, we need to add a basic eye-on-it layout to our app,
<!-- The area that is followed by the mouse -->
<div class="eye-container">
<!-- Parental area where eye-point moves -->
<div>
<!-- an element that follows -->
<div class="eye-point">eye</div>
</div>
<!-- Eye-points look at the input -->
<input class="eye-input" />
<!-- The textarea the eye-points look at -->
<textarea class="eye-textarea"></textarea>
</div>Example
But if I do this, I think it'll look weird and I don't understand. So I prepared an example code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eye On It Example</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/eye-on-it/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/eye-on-it/dist/index.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body class="eye-container">
<div>
<div class="face">
<div><div class="eye eye-point"></div></div>
<div><div class="eye eye-point"></div></div>
</div>
<div class="input-wrapper">
<input class="input eye-input" type="text" />
<textarea class="textarea eye-textarea"></textarea>
</div>
</div>
<textarea class="textarea long eye-textarea"></textarea>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background-color: #fafafa;
display: flex;
justify-content: center;
align-items: center;
> div {
margin-right: 40px;
}
}
.face {
margin: 0 auto;
width: fit-content;
display: flex;
> div {
width: 20px;
height: 30px;
border: 1px solid black;
& + div {
margin-left: 10px;
}
}
}
.eye {
width: 8px;
height: 12px;
background-color: black;
}
.input-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
}
.input,
.textarea {
width: 20vw;
min-width: 300px;
height: 24px;
margin-top: 20px;
}
.textarea {
height: 50px;
}
.textarea.long {
height: 300px;
}한국인을 위해 간단히 한글로 적어봅니다.
eye-point : 특정한 위치를 따라다니는 el
eye-container : 마우스 위치를 eye-point가 따라다니는 영역
- eye-input 또는 eye-textarea 가 focus된 상황이라면 eye-point가 따라오지 않음
- 단, always 키워드를 추가하는 경우 focus된 상황에서도 마우스가 움직이면 이를 쳐다봄
eye-input : input 창에 focus 된 상태에서 입력된 value의 마지막 부분을 eye-point가 쳐다봄
eye-textarea : eye-input 과 마찬가지로 textarea 창에 focus 된 상태에서 입력된 value의 마지막 부분을 eye-point 가 쳐다봄