Typewriter text Effect Makes Your Website more beautiful Different front-end languages and plugins(Jquery, Javascript) are used to design it which includes Javascript, CSS but first of all, I will provide you a pure CSS method. If you have a bit of knowledge of CSS you can easily use it.
1. Hand Written Text Animation Effect
This auto text effect is showing wonderful and looks exactly like someone is writing by hand. SVG has been used to design it.
- Author
- Matthew Ellis
- Source Code
- Language
- CSS & Js(Bable)
Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
1. Signature Svg Text Animation Effect
The text effect is look like as signature .
- Author
- Lars Munkholm
- Source Code
- Language
- CSS & Javascript
Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Auto Typing Text Animation Effect (AutoTyping.js)
How to Use It:
1. Download the package and insert the script file at the end of body tag in the Html page.
<script src="dist/AutoTyping.min.js"></script>
2. Create Html Tag & target to the help of Js code:
<h1 id="header"></h1>
const myheader = new AutoTyping({
id: 'header',
typeText: ['AutoTyping.js Example', 'A Text Typing Effect']
})
3. Intialize the auto text effect:
myheader.init()
4. Customization to the font color:
const myheader = new AutoTyping({
id: 'header',
typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
textColor: '#ff0000'
})
5. Customization to the text typing effect:
const myheader = new AutoTyping({
id: 'header',
typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
typeSpeed: 100,
typeDelay: 100,
typeRandom: false,
deleteSpeed: 50,
deleteDelay: 50,
typeInfinity: true
})
6. Customization to the blinking cursor:
const myheader = new AutoTyping({
id: 'header',
typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
cursor: '|',
cursorColor: '#000',
cursorSpeed: 300
})
7. Callback function:
const myheader = new AutoTyping({
id: 'header',
typeText: ['AutoTyping.js Example', 'A Text Typing Effect'],
callBack: {
counter: 3,
method: function(counter){
// do something
}
}
})