Create Animated Input Insertion Caret – smoothCaret.js

Category: Form , Javascript | August 3, 2022
Author:dooovid
Views Total:0 views
Official Page:Go to website
Last Update:August 3, 2022
License:MIT

Preview:

Create Animated Input Insertion Caret – smoothCaret.js

Description:

smoothCaret.js is an ultra-light JavaScript library for creating smoothly animated insertion caret (cursor) in text fields.

How to use it:

1. Download and load the smoothCaret.min.js library in the document.

<script src="smoothCaret.min.js" defer></script>

2. Add the data-sc attribute and smoothCaretInput class to the target input fields.

<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="text" >
</div>
<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="password" >
</div>

3. Add custom carets to the input fields.

<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="text" >
    <div class="caret" style="width: 2px; height: 60%; background-color: #00a6ff;" ></div>
</div>
<div class="sc-container">
  <input data-sc="" class="smoothCaretInput" placeholder="type something..." type="password" >
  <div class="caret" style="width: 2px; height: 60%; background-color: #ff5a5a;" ></div>
</div>

You Might Be Interested In:


Leave a Reply