Typed.js(JavaScript)를 사용한 놀라운 타이핑 효과
6131 단어 beginnerscsswebdevjavascript
HTML 부분을 다루겠습니다.
우리는 웹사이트의 뼈대를 만들기 위해 HTML을 사용합니다. HTML은 마크업 언어입니다.
이제 Google Fonts API를 사용하여 글꼴을 가져오겠습니다. 아래는
Poppins
글꼴에 대한 코드입니다. <head>
태그에 아래 코드를 붙여넣습니다.<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">
이제
<body>
태그에 컨테이너를 디자인해 보겠습니다. 아래 HTML 코드에서 유형 효과가 있는 환영 제목과 지정을 포함하는 컨테이너를 만들었습니다.<div class="container">
<h1>Hi! I'm Piyush Patil</h1>
<h6 style="display: flex; align-items: center;">
<p id="designation"></p>
</h6>
</div>
body 태그를 종료하기 전에 아래 스크립트 태그를 추가하십시오. typed.js JavaScript 라이브러리의 CDN입니다.
<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>
다음은 최종 HTML 코드입니다.
<!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>
지금까지 출력
continue reading
Reference
이 문제에 관하여(Typed.js(JavaScript)를 사용한 놀라운 타이핑 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/piyushpatil1243/amazing-typing-effect-using-typedjs-javascript-4cl0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)