An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- Slashdot
- BoingBoing
- Techcrunch
- Just Creative
- Abduzeedo
- Creative Curio
- Inspiredology
- FanExtra - PSD
- Noupe
- CSS Globe
Help Webnuz
Referal links:
October 15, 2022 03:38 pm GMT
Original Link: https://dev.to/piyushpatil1243/amazing-typing-effect-using-typedjs-javascript-4cl0
Amazing Typing Effect using Typed.js (JavaScript)
Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make an amazing typing effect using Typed.js. This will be a step-by-step guide including HTML and CSS. Let's get started .
Let's cover HTML Part
We use HTML to make the skeleton of a website. HTML is a markup language.
Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">Now let's design the container in our <body> tag. In the below HTML code, we have created a container that contains welcome heading and designation which will have a type effect.
<div class="container"> <h1>Hi! I'm Piyush Patil</h1> <h6 style="display: flex; align-items: center;"> <p id="designation"></p> </h6></div>Add the below script tag before ending your body tag. This is the CDN of typed.js JavaScript Library
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js" integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Here is the final HTML code
<!doctype html><html lang="en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> <title>Amazing Type Effect using JavaScript - @code.scientist x @codingtorque</title></head><body> <div class="container"> <h1>Hi! I'm Piyush Patil</h1> <h6 style="display: flex; align-items: center;"> <p id="designation"></p> </h6> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js" integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body></html>Output Till Now
Original Link: https://dev.to/piyushpatil1243/amazing-typing-effect-using-typedjs-javascript-4cl0
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To