[베이직 포트폴리오] 글씨먹는 팩맨

자바스크립트 없이 포트폴리오를 만들기로 했다 컨셉은 레트로 오락기!

 

keyframes을 활용해 글씨 먹는 팩맨 완성

두 개의 keyframes을 엮는 게 css만으로 하기 힘들었지만 나름 자연스럽게 된 거 같아 뿌듯하다

세밀한 조정을 원할경우 js를 추가하는 것을 권장한다 속도와 위치 조정이 핵심이기 때문에 시간을 꽤 많이 뺏겨버렸다

---

@keyframes

css문법 중 하나로 동작을 단계별로 정의할 수 있고 간단하게 애니메이션을 구현할 수 있다 

• from to ( 0% 시작 => 100% 끝 )
• to로만 쓸 수도 있다 (100% 일 때)

---

Animation 속성

• animation-name : @keyframes 이름 
• animation-duration : 애니메이션 시작부터 마지막까지 지속시간
• animation-timing-function : 애니메이션 속도 조절
  • linear : 시작과 끝까지 일정한 속도로 진행
  • ease : 천천히 시작하다 중간에 빠르게 진행되며, 다시 천천히 끝난다
  • ease-in : 천천히 시작하다 점점 빨라진다
  • ease-out : 빠르게 시작하다 점점 느려진다
  • ease-in-out : 천천히 시작하다 중간에 빠르게 진행되며, 끝에 다시 천천히 끝난다
  • cubic-bezier : 속도를 커스텀할 수 있다 애니메이션을 정밀하게 조정할 때 사용된다
• animation-delay : 애니메이션이 시작하기 전 지연시간
• animation-iteration-count : 반복 횟수
• animation-direction : 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정
• animation-fill-mode : 애니메이션 시작/끝 상태 제어
  • none : 애니메이션 종료 후, 애니메이션 적용 전 상태로 돌아간다
  • forwards :  애니메이션 종료 후, 애니메이션의 마지막 상태를 유지한다
  • backwards : 애니메이션 시작 전, 애니메이션의 시작 상태를 유지한다
  • both : 애니메이션 종료 후, 애니메이션의 마지막 상태를 유지하고, 시작 전에는 애니메이션 시작 상태를 유지한다
  • infinite : 애니메이션이 무한 반복된다

 

---

HTML

<header class="title-container">
      <h1 class="title-text">KAHEE's Portfolio!</h1>
      <div class="pacman"></div>
    </header>

 

타이핑 애니메이션

.title-container {
  height: 18vh;
  overflow: hidden; // 오버플로우로 크기를 벗어난 요소 숨기기
  text-align: center; 
  position: relative; 
}

.title-text {
  font-size: $title-text-font-size; 
  white-space: nowrap; // 텍스트가 줄 바꿈되지 않도록 설정
  display: inline-block; 
  position: relative; 
  top: $title-text-top;
  color: transparent; // 텍스트 색상을 투명으로 설정 (애니메이션을 위해)

  // ::before 가상 요소 스타일 설정
  &::before {
    content: "KAHEE's Portfolio!"; // 가상 요소의 콘텐츠
    position: absolute; 
    color: white; 
    overflow: hidden; 
    animation: titleTxt 10s steps(30) infinite;
  }
}

// 제목 텍스트 애니메이션
@keyframes titleTxt {
  0% {
    width: 100%;
    opacity: 1; 
  }
  100% {
    width: 0%; 
    opacity: 1;
  }
}

 

---

팩맨

// Pacman 
.pacman {
  width: $pacman-size; 
  height: $pacman-size; 
  position: absolute; 
  top: $pacman-top; 
  animation: move 10s linear infinite;

  // ::before와 ::after 가상 요소 스타일 설정
  &::before,
  &::after {
    content: ""; // 가상 요소의 콘텐츠는 비어 있음
    border: calc($pacman-size / 2) solid yellow; // 반지름을 계산해 노란색 테두리 설정
    border-radius: 50%; // 원형으로 설정
    position: absolute; 
    border-left-color: transparent; // 왼쪽 테두리는 투명
    border-bottom-color: transparent; // 아래쪽 테두리는 투명
    animation: mouthTop 0.7s ease infinite; 
  }

  // ::after 가상 요소 스타일 설정 (아래쪽)
  &::after {
    border-bottom-color: yellow; // 아래쪽 테두리 색상 
    border-top-color: transparent; // 위쪽 테두리는 투명
    animation: mouthBottom 0.7s ease infinite; 
  }
}

// Pacman의 위쪽 입 애니메이션
@keyframes mouthTop {
  50% {
    transform: rotate(-44deg);
  }
}

// Pacman의 아래쪽 입 애니메이션
@keyframes mouthBottom {
  50% {
    transform: rotate(44deg);
  }
}

// Pacman의 이동 애니메이션
@keyframes move {
  0% {
    transform: translateX(73vw);
  }
  100% {
    transform: translateX(20vw);
  }
}

---

전체 CSS 코드

@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");


$pacman-size: 8vw; 
$title-text-top: 3vw; 
$pacman-top: 0vw;
$title-text-font-size: 3vw; 

// 스크롤바 숨김
::-webkit-scrollbar {
  display: none;
}


body {
  width: 100%; 
  height: 100vh; 
  font-family: "Press Start 2P", cursive; 
  background-color: black; 
  color: white; 
}


* {
  margin: 0;
  padding: 0; 
  box-sizing: border-box; 
}


.title-container {
  height: 18vh;
  overflow: hidden; // 오버플로우로 크기를 벗어난 요소 숨기기
  text-align: center; 
  position: relative; 
}


.title-text {
  font-size: $title-text-font-size; 
  white-space: nowrap; // 텍스트가 줄 바꿈되지 않도록 설정
  display: inline-block; 
  position: relative; 
  top: $title-text-top;
  color: transparent; // 텍스트 색상을 투명으로 설정 (애니메이션을 위해)

  // ::before 가상 요소 스타일 설정
  &::before {
    content: "KAHEE's Portfolio!"; // 가상 요소의 콘텐츠
    position: absolute; 
    color: white; 
    overflow: hidden; 
    animation: titleTxt 10s steps(30) infinite;
  }
}

// Pacman 
.pacman {
  width: $pacman-size; 
  height: $pacman-size; 
  position: absolute; 
  top: $pacman-top; 
  animation: move 10s linear infinite;

  // ::before와 ::after 가상 요소 스타일 설정
  &::before,
  &::after {
    content: ""; // 가상 요소의 콘텐츠는 비어 있음
    border: calc($pacman-size / 2) solid yellow; // 반지름을 계산해 노란색 테두리 설정
    border-radius: 50%; // 원형으로 설정
    position: absolute; 
    border-left-color: transparent; // 왼쪽 테두리는 투명
    border-bottom-color: transparent; // 아래쪽 테두리는 투명
    animation: mouthTop 0.7s ease infinite; 
  }

  // ::after 가상 요소 스타일 설정 (아래쪽)
  &::after {
    border-bottom-color: yellow; // 아래쪽 테두리 색상 
    border-top-color: transparent; // 위쪽 테두리는 투명
    animation: mouthBottom 0.7s ease infinite; 
  }
}

// 제목 텍스트 애니메이션
@keyframes titleTxt {
  0% {
    width: 100%;
    opacity: 1; 
  }
  100% {
    width: 0%; 
    opacity: 1;
  }
}

// Pacman의 위쪽 입 애니메이션
@keyframes mouthTop {
  50% {
    transform: rotate(-44deg);
  }
}

// Pacman의 아래쪽 입 애니메이션
@keyframes mouthBottom {
  50% {
    transform: rotate(44deg);
  }
}

// Pacman의 이동 애니메이션
@keyframes move {
  0% {
    transform: translateX(73vw);
  }
  100% {
    transform: translateX(20vw);
  }
}

---

참고 블로그

 

사라지는 글씨

https://velog.io/@sebely/TIL-CSS%ED%85%8D%EC%8A%A4%ED%8A%B8-%ED%9A%A8%EA%B3%BC%ED%83%80%EC%9D%B4%ED%95%91-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EB%B0%B0%EA%B2%BD

[TIL] CSS_텍스트 효과(타이핑 효과)

 

 

팩맨

https://codepen.io/thesilentcoder/pen/YYaoPb

Pacman and Ghost | CSS Animation