eye-on-it

applely
esm cjs Styles
eye-on-it JS library on npm Download eye-on-it JS library

A JavaScript library for tracking mouse movement and input focus.

Version 1.0.6 License MIT Vulnerabilities 0
eye-on-it has no homepage
eye-on-it JS library on GitHub
eye-on-it JS library on npm
Download eye-on-it JS library
Keywords
mousetrackerinputanimation
INSTALL
Type:
Version:
<script src=" https://cdn.jsdelivr.net/npm/eye-on-it@1.0.6/dist/index.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/eye-on-it@1.0.6/dist/style.min.css " rel="stylesheet">
Learn more
Readme Files Statistics Browse CDN

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-it

When 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.

Image 
<!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 가 쳐다봄