Typed.js(JavaScript)를 사용한 놀라운 타이핑 효과

6131 단어 beginnerscsswebdevjavascript
안녕하세요 여러분! Coding Torque에 오신 것을 환영합니다. 이 블로그에서는 Typed.js를 사용하여 놀라운 타이핑 효과를 만드는 방법을 설명하겠습니다. 이것은 HTML과 CSS를 포함한 단계별 가이드가 될 것입니다. 시작합시다 🚀.

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
TodoList를 만들어 프런트 엔드의 기초를 배우자.
CS 101: 코딩 소개

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage