박시은

(❁´◡`❁)

2 분 소요


▶ HTML / CSS

먼저 아래처럼 레이아웃을 잡아놓자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typing Effect</title>
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="display-container">
      <span class="material-icons">language</span>
      <div class="title">
        <p id="dynamic" class="dynamic-text">Learn to HTML</p>
        <p class="sub-text">Mini Project</p>
      </div>
    </div>
    <script src="script.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}
.display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: rgb(11, 20, 70);
  color: white;
}
.material-icons {
  font-size: 8rem;
}

.title {
  text-align: center;
}
.dynamic-text {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}
.sub-text {
  font-size: 1.5rem;
}


▷ 가상 요소로 커서 생성

#dynamic {
  position: relative;
  display: inline-block;
}
#dynamic::after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  right: -10px;
  width: 3px;
  height: 100%;
  background-color: white;
}
  • 짜잔!🎇 커서가 생겼다.



▶ JavaScript

▷ 커서 깜빡임 효과 구현

  • 먼저 dynamic이라는 id 속성 값을 가지고 있는 태그가 만약에 active라는 클래스도 같이 가지고 있다면, display 속성을 none으로 해서 일시적으로 웹 페이지에 감춰지게끔 코드를 작성해주자.
  • 《 toggle 메서드 》를 사용해서 구현하였다.
#dynamic.active::after {
  display: none;
}

let target = document.querySelector("#dynamic");
function blick() {
  target.classList.toggle("active");
}
setInterval(blick, 500);


▷ 타이핑 효과 구현

  1. 배열 변수를 생성한다.
let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to JavaScript"];


  1. 배열에 있는 문자열 중에 랜덤으로 선택하는 코드를 변수에 저장한다. ➡️ Math.floor란? 소수점을 버리는 메서드이다. 배열의 index에는 소수점이 사용될 수 없기 때문에 사용해야한다.
let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];


  1. 선택된 문자열을 배열을 만드는 코드를 변수에 저장한다. ➡️ 《 split 》이란? 문자열을 분할하여 배열로 리턴하는 함수이다.
let selectStringArr = selectString.split("");

  1. 한 글자씩 텍스트 출력 함수 함수 만들기 ➡️ shift란? 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환하는 메서드이다.
function dynamicShow(randomArr) {
  if (randomArr.length > 0) {
    dynamic.textContent += randomArr.shift();
  }
}

그럼 아래와 같이 제거된 첫 번째 요소인 “L”이 마지막에 출력이 되는 것을 볼 수 있다.

이제 HTML에 <p id="dynamic" class="dynamic-text">Learn to HTML</p> 의 Learn to HTML을 지워주고, 재귀함수의 원리를 이용해 일정 간격으로 dynamicShow를 호출하자.

// 한 글자씩 텍스트 출력 함수
function dynamicShow(randomArr) {
  if (randomArr.length > 0) {
    dynamic.textContent += randomArr.shift();
    setTimeout(() => {
      dynamicShow(randomArr);
    }, 80);
  }
}


  • 짜잔!🎇


  1. 더 이상 출력할 수 있는 문자가 없으면, 또 다시 문자열을 출력하게 해보자!
function randomString() {
  let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to JavaScript"];
  let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
  let selectStringArr = selectString.split("");

  return selectStringArr;
}

// 타이핑 리셋
function resetTyping() {
  dynamic.textContent = "";
  dynamicShow(randomString());
}

// 한 글자씩 텍스트 출력 함수
function dynamicShow(randomArr) {
  if (randomArr.length > 0) {
    dynamic.textContent += randomArr.shift();
    setTimeout(() => {
      dynamicShow(randomArr);
    }, 80);
  } else {
    setTimeout(resetTyping, 3000);
  }
}
dynamicShow(randomString());


  • 짜잔!🎇


▷ 전체코드

const dynamic = document.querySelector("#dynamic");

function randomString() {
  let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to JavaScript"];
  let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
  let selectStringArr = selectString.split("");

  return selectStringArr;
}

// 타이핑 리셋
function resetTyping() {
  dynamic.textContent = "";
  dynamicShow(randomString());
}

// 한 글자씩 텍스트 출력 함수
function dynamicShow(randomArr) {
  if (randomArr.length > 0) {
    dynamic.textContent += randomArr.shift();
    setTimeout(() => {
      dynamicShow(randomArr);
    }, 80);
  } else {
    setTimeout(resetTyping, 3000);
  }
}
dynamicShow(randomString());

function blink() {
  dynamic.classList.toggle("active");
}
setInterval(blink, 500);



📎참조

  • https://www.youtube.com/watch?v=e56H5n1SvEs&list=PL-eeIUD86IjSyxTbGT7wY3Hie_HA5bKvg

카테고리:

업데이트:

댓글남기기

참고