[애니메이션] Retro Typing Effect 구현하기 ✨

메인페이지 - Retro Typing Effect 구현하기

포트폴리오의 메인 페이지에 영상이 필요하다고 고민하다가, CRT 화면을 연상시키는 스타일과 함께 터미널 창에서 텍스트가 타자처럼 한 글자씩 입력되는 애니메이션 영상을 만들기로 했다. 그리고 영상안에 사용되는 화면을 직접 HTML, CSS, JavaScript를 활용해 만들었다. 구현한 방식에대해 글을 작성하려 한다.

1. 기본 HTML 구조 📄

HTML에서는 두 가지 주요 요소를 사용하였다.

• 타자 애니메이션을 위한 #text
• 커서를 나타내는 cursor
• CRT 효과를 위한 scanlines이다.

<div class="console">
  <span id="text"></span> 
  <span class="cursor">_</span>
</div>
<div class="scanlines"></div>

2. 스타일링 (CSS) 🎨

2-1. 기본 스타일 설정

PyeongChangPeace-Bold라는 폰트를 사용하여, 폰트를 여러가지를 적용하여, 그중 내가 가장 원하는 느낌의 글꼴을 선택하였다. 또한, 배경은 검정색, 글자는 빛나는 초록색으로 설정하여 최대한 CRT화면 처럼 보이게 설정하였다.

body {
  background-color: black;
  color: #56dfb4;
  font-family: 'PyeongChangPeace-Bold', sans-serif;
  font-size: 72px;
  letter-spacing: 5px;
  line-height: 1.45;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

2.2 타자 효과 및 커서 스타일

타자 애니메이션은 글자가 하나씩 나타나도록 설정하고, 커서는 blink애니메이션을 통해 깜빡이는 효과를 주었다.

.console {
  display: inline-block;
  white-space: nowrap;
  text-shadow: 0 0 3px #56dfb4, 0 0 5px #56dfb4, 0 0 10px #00FF00;
  position: relative;
}

.cursor {
  display: inline-block;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

2.3 CRT 화면 효과

CRT 느낌을 살리기 위해 스캔 라인과 그라디언트 배경을 추가했다. ::after와 ::before pseudo-elements를 이용해 화면의 상단과 배경에 각각 스캔 라인과 그라디언트를 적용했다. 그리고 스캔 라인 애니메이션은 일정한 시간 간격으로 스캔라인이 움직이는 효과를 구현 이를 통해 더욱 CRT 화면의 느낌을 구현헀다.

body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0px, rgba(0, 0, 0, 0.9) 1px, transparent 2px, transparent 2px);
  opacity: 0.2;
  z-index: 1;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 255, 0, 0.05) 10%, rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 스캔 라인 애니메이션 */
@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0, 255, 0, 0.05) 2px);
  animation: scanlines 10s linear infinite;
  pointer-events: none;
  z-index: 2;
}

3. 타자 효과 구현 (JavaScript) 🖥️

타자 애니메이션은 JavaScript를 이용하여 글자가 하나씩 표시되도록 구현 하였다. 배열 texts에 텍스트를 넣고, 하나씩 화면에 나타나게 하는 방식으로 코드를 작성하였다.

const textElement = document.getElementById('text'); // 텍스트를 표시할 HTML 요소
const texts = ['HELLO WORLD!', 'BOA PORTFOLIO✌️']; // 타이핑할 텍스트들
let textIndex = 0; // 현재 타이핑할 텍스트의 인덱스
let index = 0; // 현재 텍스트의 문자 위치

// 타이핑 함수
function typeText() {
  // 현재 텍스트의 모든 글자가 출력되지 않았다면
  if (index < texts[textIndex].length) { 
    textElement.innerHTML += texts[textIndex][index]; // 한 글자씩 화면에 추가
    index++; // 인덱스를 하나 증가시켜서 다음 글자 표시
    setTimeout(typeText, 150); // 150ms 후에 다시 타이핑
  } 
// 현재 텍스트가 끝났다면
else if (textIndex < texts.length - 1) { 
    textIndex++; // 다음 텍스트로 넘어가기
    index = 0; // 문자 인덱스를 0으로 초기화
    setTimeout(() => {
      textElement.innerHTML += '<br>'; // 줄바꿈
      typeText(); // 다음 텍스트 타이핑 시작
    }, 800); // 800ms 후에 다음 텍스트 시작
  }
}

typeText(); // 처음 타이핑 시작

1. texts 배열에 텍스트 넣기

• texts 배열에는 내가 원하는 문구를 넣는다. 배열에 있는 문구들이 차례대로 타자처럼 화면에 나타나게된다.
  
  2. 타이핑 함수 typeText
• typeText 함수는 한 글자씩 타이핑을 하는 역할을 함. 처음에는 index가 0이고, 이 값이 점차 증가하면서 texts 배열에 있는 문구들을 하나씩 글자별로 화면에 출력한다.
• 글자가 하나씩 타이핑되면 setTimeout을 이용해 잠시 기다린 후, 그 다음 글자를 출력하는 방식이다.
  
  3. 타이핑이 끝나면 다음 텍스트로 넘어가기
• 만약 현재 문구의 타이핑이 끝났다면, setTimeout으로 잠깐 대기 후, 다음 텍스트를 출력한다 .
• 각 텍스트 사이에는 <br>을 넣어 줄바꿈을 주었다.

4. 최종 구현 모습 🎬