⌨️ A tiny library for creating a typing effect on specified text element.

Korney Vasilchenko

Last update: Sep 29, 2021

Overview

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element.

Demo

Size (It's really tiny)

Minimized: 2.9KB
Gziped: 1.1KB

Installation

Library can be easily installed via either NPM or Bower:

npm i tinytyper --save

bower i tinytyper --save

Usage

Basic setup looks like this:

import TinyTyper from 'tinytyper';

const el       = document.querySelector('.text-el')
const options  = { /* . . . */ }
const instance = new TinyTyper(el, options)

In case you need to run animation again:

instance.animate()

Available options:

Option	Default	Description
`text`	`innerText` of specifed `el`ement	Sets a text to be displayed
`textSpeed`	`95`	Defines text speed animation
`cursor`	`▌`	Defines current cursor symbol
`blinkSpeed`	`0.05`	Defines blink speed of a cursor
`cursorClass`	`tiny-typer-cursor`	A CSS class for cursor element
`textClass`	`tiny-typer-text`	A CSS class for text element
`staticCursor`	`false`	Makes cursor static (disables blinking)
`staticText`	`false`	Makes text static (disables animation)

Contributions

Contributions are welcome. Feel free to create issues and PRs

License

MIT

Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Dec 18, 2022

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Dec 27, 2022

🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Look

Dec 9, 2022

🔮 CSS loading animations made by single element.

Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only

Dec 29, 2022

Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Dec 30, 2022

A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Dec 26, 2022

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Nov 29, 2022

Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip

Dec 30, 2022

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022