Plugins typed. Js to implement cool typewriter effects

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Preface:

Recently, while working on a front-end project, I found something fun and interesting while browsing someone else’s excellent personal blog. Look at the picture below, similar to the effect of typing, and then in the feeling of thinking, feel the whole web page is full of thoughts. So I went to Baidu how to achieve this effect. There are a lot of native implementations, but almost all of them are JS manipulating Dom elements, but I wrote them on a Vue project, which is obviously not right. That’s when I found outtyped.jsIt encapsulates an extra layer when using vue, so that it does not manipulate the DOM. Now share this plugin.

The typed.js

Typed. Js is a typed library. The effect is to display a typed message on a typewriter. You can customize any string, specify the display speed, specify whether to loop, etc

The official (author) demo is shown below.

It is possible to use native JS to achieve this effect, but still very cumbersome typed. JS is a lightweight JavaScript plug-in, used to achieve the typed page text animation effect.

The use of typed.js

1. Environment preparation

  1. In native HTML

You just need to import the CDN

< script SRC = "https://cdn.jsdelivr.net/npm/[email protected]" > < / script >

  1. In the vue

NPM install –save vue-typed-js

2. Use

The original HTML

Easiest to use
<body>
    <span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        strings: ["Welcome to my blog."."You're the best."].// Output text
        typeSpeed: 200.// The speed of typing
  });
</script>
Copy the code

Effect:

Input to suspend

You can pause the string for a while by escaping the character ^1000.

<body>
    <span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        // Pause for three seconds
        strings: ["Let me think about who came to see me."."It's you, old man."].typeSpeed: 200.// The speed of typing
  });
</script>
Copy the code
Intelligent backspace

Will revert intelligently to the repetition of the previous sentence

<body>
    <span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        // Will intelligently fall back to the repetition of the previous sentence
        strings: ["I want some noodles tomorrow."."I want to eat cold baked noodles tomorrow."."I want to eat anything tomorrow."].typeSpeed: 100.// The speed of typing
  });
</script>

Copy the code

Effect:

Change the cursor style

Change the style of the cursor with the cursorChar: ‘_’ property

Batch type

Include data or text that needs to be displayed in batches by escaping characters.

There will be a paragraph of text that is not printed, but suddenly appeared in its entirety, there will be a kind of question typing, machine answering feeling.

<body>
    <span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        strings: ["Love is always in tears."."As long as you're not tired, you're dead."."The future is predictable."].typeSpeed: 100.// The speed of typing
        smartBackspace: true.// Enable intelligent backspace by default false
        cursorChar: '♡'.backSpeed: 50.// Rewind speed
        backDelay: 500.// Back delay
        loop:true.// Whether to loop
        startDelay:1000.// Start time
        fadeOut:true.// Fade out
  });
</script>
Copy the code

Effect:

Static HTML strings (SEO friendly)

Instead of using strings arrays to insert strings, you can place HTML divs on the page and read from them. This allows bots, search engines, and users with JavaScript disabled to view your text on the page.

<body>
    <div id="typed-strings">
        <p>Do you like<strong>Like something out of the sky</strong>welcome</p>
        <p>In thy earthly name,</em><em>It doesn't matter.</em>- let you go</p>
    </div>
    <span id="typed"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var typed = new Typed('#typed', {
    stringsElement: '#typed-strings'.typeSpeed: 200.// The speed of typing
  });
</script>
Copy the code

Effect:

Other commonly used properties

I’ve just listed the ones I use a lot, and there are more attributes at the end of the article.

<body>
    <span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var typed = new Typed(".box", {
        strings: ["Welcome to my blog."."I got a message for you."."The future is predictable."].typeSpeed: 100.// The speed of typing
        smartBackspace: true.// Enable intelligent backspace by default false
        backSpeed: 50.// Rewind speed
        backDelay: 500.// Back delay
        loop:false.// Whether to loop the default is false
        startDelay:1000.// Start time
        fadeOut:true.// Fade out
  });
</script>
Copy the code

Effect:

See the author’s full documentation for more attributes

Used in Vue

All this stuff is used in native HTML, so the attributes are the same, just a little bit different. Also, the plug-in uses an extra layer of encapsulation in vUE, so we don’t have to manipulate the Dom ourselves.

Import and use globally in main.js

import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'

Vue.use(VueTypedJs)
Copy the code

usage

To get started, simply add the vue-typed-js custom element to the template and pass the text, which should be entered into the strings property. In addition, you need to pass an element with class typing to the slot, which will be used as a wrapper.

Easiest to use

<template>
  <vue-typed-js :strings="[' This is my blog ',' I'm a romantic coder ',' Welcome to the big boys ']">
    <h1 class="typing"></h1>
  </vue-typed-js>
</template>

<script>
export default {};
</script>

<style>
</style>
Copy the code

Effect:

More attributes

The vuE-typed -js custom tag can be added with attributes as follows:

attribute type describe usage
strings An array of The string to enter :strings="['Text 1', 'Text 2']"
stringsElement string The ID of the element that contains character string child elements :stringsElement="'myId'"
typeSpeed The number Input speed (in milliseconds) :typeSpeed="50"
startDelay The number Time in milliseconds before starting input :startDelay="1000"
backSpeed The number Backspace speed in milliseconds :backSpeed="10"
smartBackspace The Boolean Backspace only content that does not match the previous string :smartBackspace="true"
shuffle The Boolean Shuffling (shuffling the output order of statements) :shuffle="true"
backDelay The number Time before backspace (in milliseconds) :backDelay="100"
fadeOut The Boolean Fade out instead of backspace :fadeOut="true"
fadeOutClass string Fade in and out of the animation CSS class :fadeOutClass="'fadeOutClass'"
fadeOutDelay The Boolean Fade out delay (in milliseconds) :fadeOutDelay="true"
loop The Boolean Loop string :loop="true"
loopCount The number cycles :loopCount="3"
showCursor The Boolean Show the cursor :showCursor="true"
cursorChar string The cursor character :cursorChar="'_'"
autoInsertCss The Boolean Insert the cursor CSS and fade out the HTML :autoInsertCss="true"
attr string Attributes used to enter Ex: enter placeholders, values, or just HTML text :attr="'placeholder'"
bindInputFocusEvents The Boolean If el is text input, bind to focus and blur :bindInputFocusEvents="true"
contentType string Plain text format “HTML” or “NULL” :contentType="'html'"

Finally, put in a typewriter with some style

<template>
  <div>
    <vue-typed-js
      class="mao"
      :strings="[' This is my blog <br/> I am a romantic code farmer < BR /> Welcome you guys to visit ', 'this is my blog < BR /> I am a romantic code farmer < BR /> Send you a word ',' this is my blog < BR /> I am a romantic code farmer < BR /> Bo view and about, thick and small. <br/><h2>Romantic&nbsp;until&nbsp; death</h2>',
      ]"
      :cursorChar="' ☜ '"
      :typeSpeed="100"
      :backSpeed="50"
      :autoInsertCss="true"
    >
      <h1 class="typing"></h1>
    </vue-typed-js>
  </div>
</template>

<script>
export default {};
</script>

<style>
.mao {
  position: relative;
  left: 35%;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(rgb(255.255.0), rgb(0.255.255));
  -webkit-text-fill-color: transparent;
}
</style>
Copy the code

Effect:

Third, write at the end

If used in other projects:

Use reference in ReactJS

See this example of a React app using Typed. Js in a component

Use reference in Vue

Use typed.js in vue

Used as a WebComponent

WebComponent:

Typed. Js author website: www.mattboldt.com

Click “like” and go ~~~~