Typing text javascript code

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A JavaScript Typing Animation Library

License

mattboldt/typed.js

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Typed.js is a library that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.

script src pl-s">https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js">script>

For use directly in the browser via tag:

 span id pl-s">element">span> script src pl-s">https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js">script> script> var typed = new Typed('#element',  strings: ['First sentence.', '& a second sentence.'], typeSpeed: 50, >); script> body>

For use with a build tool like Vite, and/or in a React application, install with NPM or Yarn.

import Typed from 'typed.js'; const typed = new Typed('#element',  strings: ['First sentence.', '& a second sentence.'], typeSpeed: 50, >);

import React from 'react'; import Typed from 'typed.js'; function MyComponent()  // Create reference to store the DOM element containing the animation const el = React.useRef(null); React.useEffect(() =>  const typed = new Typed(el.current,  strings: ['First sentence.', '& a second sentence.'], typeSpeed: 50, >); return () =>  // Destroy Typed instance during cleanup to stop animation typed.destroy(); >; >, []); return ( div className="App"> span ref=el> /> /div> ); >

Wonderful sites that have used (or are using) Typed.js

Strings from static HTML (SEO Friendly)

Rather than using the strings array to insert strings, you can place an HTML div on the page and read from it. This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.

script> var typed = new Typed('#typed',  stringsElement: '#typed-strings' >); /script>

div id pl-s">typed-strings"> p>Typed.js is a strong>JavaScriptstrong> library.p> p>It em>typesem> out sentences.p> div> span id pl-s">typed">span>

You can pause in the middle of a string for a given amount of time by including an escape character.

var typed = new Typed('#element',  // Waits 1000ms after typing "First" strings: ['First ^1000 sentence.', 'Second sentence.'], >);

In the following example, this would only backspace the words after «This is a»

var typed = new Typed('#element',  strings: ['This is a JavaScript library', 'This is an ES6 module'], smartBackspace: true, // Default value >);

The following example would emulate how a terminal acts when typing a command and seeing its result.

var typed = new Typed('#element',  strings: ['git push --force ^1000\n `pushed to origin with option force`'], >);

CSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:

/* Cursor */ .typed-cursor < >/* If fade out option is set */ .typed-fade-out

var typed = new Typed('#element',  /** * @property array> strings strings to be typed * @property string> stringsElement ID of element containing string children */ strings: [ 'These are the default values. ', 'You know what you should do?', 'Use your own!', 'Have a great day!', ], stringsElement: null, /** * @property number> typeSpeed type speed in milliseconds */ typeSpeed: 0, /** * @property number> startDelay time before typing starts in milliseconds */ startDelay: 0, /** * @property number> backSpeed backspacing speed in milliseconds */ backSpeed: 0, /** * @property boolean> smartBackspace only backspace what doesn't match the previous string */ smartBackspace: true, /** * @property boolean> shuffle shuffle the strings */ shuffle: false, /** * @property number> backDelay time before backspacing in milliseconds */ backDelay: 700, /** * @property boolean> fadeOut Fade out instead of backspace * @property string> fadeOutClass css class for fade animation * @property boolean> fadeOutDelay Fade out delay in milliseconds */ fadeOut: false, fadeOutClass: 'typed-fade-out', fadeOutDelay: 500, /** * @property boolean> loop loop strings * @property number> loopCount amount of loops */ loop: false, loopCount: Infinity, /** * @property boolean> showCursor show cursor * @property string> cursorChar character for cursor * @property boolean> autoInsertCss insert CSS for cursor and fadeOut into HTML */ showCursor: true, cursorChar: '|', autoInsertCss: true, /** * @property string> attr attribute for typing * Ex: input placeholder, value, or just HTML text */ attr: null, /** * @property boolean> bindInputFocusEvents bind to focus and blur if el is text input */ bindInputFocusEvents: false, /** * @property string> contentType 'html' or 'null' for plaintext */ contentType: 'html', /** * Before it begins typing * @param Typed> self */ onBegin: (self) => >, /** * All typing is complete * @param Typed> self */ onComplete: (self) => >, /** * Before each string is typed * @param number> arrayPos * @param Typed> self */ preStringTyped: (arrayPos, self) => >, /** * After each string is typed * @param number> arrayPos * @param Typed> self */ onStringTyped: (arrayPos, self) => >, /** * During looping, after last string is typed * @param Typed> self */ onLastStringBackspaced: (self) => >, /** * Typing has been stopped * @param number> arrayPos * @param Typed> self */ onTypingPaused: (arrayPos, self) => >, /** * Typing has been started after being stopped * @param number> arrayPos * @param Typed> self */ onTypingResumed: (arrayPos, self) => >, /** * After reset * @param Typed> self */ onReset: (self) => >, /** * After stop * @param number> arrayPos * @param Typed> self */ onStop: (arrayPos, self) => >, /** * After start * @param number> arrayPos * @param Typed> self */ onStart: (arrayPos, self) => >, /** * After destroy * @param Typed> self */ onDestroy: (self) => >, >);

Thanks for checking this out. If you have any questions, I’ll be on Twitter.

If you’re using this, let me know! I’d love to see it.

Источник

JavaScript Text Typing Animation

This JavaScript code snippet helps you to create text typing animation. It stores the words in an array and types each letter one by one in a loop along with a blinking cursor.

You can easily control the speed of typing, blinking cursor, and text erasing delay. Similarly, you can set the custom delay time between the current and next text. Besides this, the text container can be highly customized with CSS according to your needs.

How to Create JavaScript Text Typing Animation

1. In order to create typing animation, create a span element with the class name «typed-text» . This class will hold the typed text that will be rendered through JavaScript. Similarly, create a span element with the class name «cursor» to display a cursor along with text typing. Place these span elements into a p tag, wrap all into a div element and define its class name «container» .

2. After that, use the following CSS style for the text typing animation. You can set the custom width and background for the container element according to your needs. Similarly, you can set the custom value for the font size and weight.

.container < background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://source.unsplash.com/1280x720/?girl); background-position: center; background-size: cover; height: 650px; display: flex; justify-content: center; align-items: center; >.container p < font-size: 3rem; padding: 0.5rem; font-weight: bold; letter-spacing: 0.1rem; text-align: center; overflow: hidden; >.container p span.typed-text < font-weight: normal; color: #dd7732; >.container p span.cursor < display: inline-block; background-color: #ccc; margin-left: 0.1rem; width: 3px; animation: blink 1s infinite; >.container p span.cursor.typing < animation: none; >@keyframes blink < 0% < background-color: #ccc; >49% < background-color: #ccc; >50% < background-color: transparent; >99% < background-color: transparent; >100% < background-color: #ccc; >>

3. Finally, add the following typewriter Js code before closing the body tag in order to functionalize the text typing animation. You can set the custom words inside the textArray array. Likewise, you can increase/decrease the speed of the typing and erasing by updating the typingDelay and erasingDelay values.

const typedTextSpan = document.querySelector(".typed-text"); const cursorSpan = document.querySelector(".cursor"); const textArray = ["code snippets", "plugins", "scripts", "tutorials"]; const typingDelay = 200; const erasingDelay = 100; const newTextDelay = 2000; // Delay between current and next text let textArrayIndex = 0; let charIndex = 0; function type() < if (charIndex < textArray[textArrayIndex].length) < if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing"); typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex); charIndex++; setTimeout(type, typingDelay); >else < cursorSpan.classList.remove("typing"); setTimeout(erase, newTextDelay); >> function erase() < if (charIndex >0) < if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing"); typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1); charIndex--; setTimeout(erase, erasingDelay); >else < cursorSpan.classList.remove("typing"); textArrayIndex++; if(textArrayIndex>=textArray.length) textArrayIndex=0; setTimeout(type, typingDelay + 1100); > > document.addEventListener("DOMContentLoaded", function() < // On DOM Load initiate the effect if(textArray.length) setTimeout(type, newTextDelay + 250); >);

That’s all! hopefully, you have successfully integrated this typing text animation into your project. If you have any questions or facing any issues, feel free to comment below.

Related Code Snippets:

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Источник