Menu

디자인 요소 확인

화려한 텍스트 애니메이션 효과

 

전체 코드
전체 코드 확인하기
<html>
<head>
<style>
      @font-face {
  font-family: "Geist";
  src: url("https://pham.codes/d/GeistVF.woff2") format("woff2");
}
 
p {
  font-family: "Geist";
  font-size: 128px;
  margin: 0;
 
  background-color: white;
  background-image: linear-gradient(0deg, #111 70%, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  filter: drop-shadow();
 
  --wght-min: 32;
  --wght-max: 240;
}
 
p > span {
  animation: breath 1.5s alternate cubic-bezier(0.37, 0, 0.63, 1);
  animation-iteration-count: infinite;
  animation-delay: 1s;
  animation-fill-mode: both;
}
 
@keyframes breath {
  0% {
    font-variation-settings: "wght" var(--wght-min);
  }
  100% {
    font-variation-settings: "wght" var(--wght-max);
  }
}
 
/* Setup */
 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
 
html,
body {
  height: 100%;
  background: white;
  color: #111;
}
 
</style>
</head>
<body>
<div class="container">
  <p aria-label="Geist Sans">
    <span aria-hidden="true">W</span><span aria-hidden="true">e</span><span aria-hidden="true"b</span><span aria-hidden="true">s</span><span aria-hidden="true">a</span><span aria-hidden="true">.</span><span aria-hidden="true">I</span><span aria-hidden="true"n</span><span aria-hidden="true">f</span><span aria-hidden="true">o</span>
  </p>
</div>
    <script>
      const spans = document.querySelectorAll('p span');
 
const numLetters = spans.length;
 
spans.forEach(function(span, i) {
    const mappedIndex = i - (numLetters / 2)
    span.style.animationDelay = (mappedIndex * 0.25) + 's';
});
    </script>
  </body>
</html>
</script>
웹사이트 제작 문의하기
코드 설명)

CSS 부분 설명:

1. `@font-face`:
– `@font-face`는 웹 페이지에서 사용할 폰트를 정의합니다.
– `”Geist”`라는 이름의 사용자 정의 폰트를 선언하고, 해당 폰트 파일의 경로를 지정합니다.

2. `p` 선택자:
– `p` 선택자는 모든 `<p>` 요소에 스타일을 적용합니다.
– `font-family` 속성을 사용하여 텍스트에 `”Geist”` 폰트를 적용합니다.
– `font-size` 속성을 사용하여 텍스트의 크기를 설정합니다.
– `margin` 속성을 사용하여 요소 주위의 여백을 설정합니다.
– `background-color` 속성을 사용하여 텍스트의 배경색을 설정합니다.
– `background-image` 속성을 사용하여 텍스트의 배경 이미지를 설정합니다. 여기서는 그라데이션을 사용하고 있습니다.
– `background-clip` 속성을 사용하여 배경 이미지가 텍스트 모양을 따라야 함을 지정합니다.
– `-webkit-text-fill-color` 및 `-moz-text-fill-color` 속성을 사용하여 텍스트의 색을 투명하게 설정합니다. 이것은 텍스트의 실제 색을 숨기는 데 사용됩니다.
– `filter` 속성을 사용하여 그림자 효과를 추가합니다.

3. `p > span` 선택자:
– `p > span` 선택자는 `<p>` 요소 내에 있는 모든 `<span>` 요소에 스타일을 적용합니다.
– `animation` 속성을 사용하여 텍스트에 애니메이션 효과를 추가합니다.
– `animation-delay` 속성을 사용하여 애니메이션의 지연 시간을 설정합니다.

JavaScript 부분 설명:

1. `const spans = document.querySelectorAll(‘p span’);`:
– `querySelectorAll()` 함수를 사용하여 모든 `<p>` 요소 내부의 `<span>` 요소를 선택합니다.
– 선택한 요소들은 `spans`라는 변수에 NodeList 형식으로 저장됩니다.

2. `spans.forEach(function(span, i) { … });`:
– `forEach()` 메서드를 사용하여 NodeList에 대해 반복 작업을 수행합니다.
– 각 반복에서는 선택된 `<span>` 요소와 해당 인덱스를 매개변수로 전달합니다.

3. `span.style.animationDelay = (mappedIndex * 0.25) + ‘s’;`:
– 각 `<span>` 요소의 `animationDelay` 속성을 설정합니다.
– `animationDelay`를 사용하여 각 텍스트 문자열이 애니메이션을 시작하는 시간을 조절합니다.
– `mappedIndex * 0.25`는 각 요소의 인덱스에 따라 지연 시간을 계산하는데, 인덱스가 중앙에 가까울수록 더 긴 지연 시간이 적용됩니다.
– `+ ‘s’`는 초 단위를 나타냅니다.

문의하기
문의하기