글자 및 단어 분할 애니메이션을 빌드하는 방법에 관한 기본 개요입니다.
이 게시물에서는 최소한의 기능으로 액세스 가능하며 여러 브라우저에서 작동하는 웹용 분할 텍스트 애니메이션과 상호작용을 해결하는 방법에 관한 생각을 공유하고자 합니다. 데모를 사용해 보세요.
동영상을 선호하는 경우 이 게시물의 YouTube 버전을 참고하세요.
개요
텍스트 분할 애니메이션은 놀라운 효과를 줄 수 있습니다. 이 게시물에서는 애니메이션의 가능성을 간단히 살펴보지만, 이를 토대로 발전시킬 수 있는 기반을 제공합니다. 목표는 점진적으로 애니메이션을 적용하는 것입니다. 텍스트는 기본적으로 읽을 수 있어야 하며 애니메이션은 그 위에 빌드되어야 합니다. 분할 텍스트 모션 효과는 화려해질 수 있으며 방해가 될 수 있으므로 사용자가 모션을 허용하는 경우에만 HTML을 조작하거나 모션 스타일을 적용합니다.
다음은 워크플로 및 결과에 대한 일반적인 개요입니다.
- CSS 및 JS용으로 모션 감소 조건부 변수를 준비합니다.
- JavaScript에서 텍스트 분할 유틸리티를 준비합니다.
- 페이지 로드 시 조건문과 유틸리티를 조정합니다.
- 문자와 단어의 CSS 전환 및 애니메이션을 작성합니다 (멋진 부분!).
다음은 만들려는 조건부 결과의 미리보기입니다.
사용자가 모션 감소를 선호하는 경우 HTML 문서를 그대로 두고 애니메이션을 실행하지 않습니다. 모션이 정상이면 동영상을 잘게 자릅니다. 다음은 JavaScript가 텍스트를 문자별로 분할한 후의 HTML 미리보기입니다.
모션 조건문 준비
편리하게 사용할 수 있는 @media
(prefers-reduced-motion: reduce)
미디어 쿼리는 이 프로젝트의 CSS 및 JavaScript에서 사용됩니다. 이 미디어 쿼리는 텍스트를 분할할지 여부를 결정하는 기본 조건문입니다. CSS 미디어 쿼리는 전환 및 애니메이션을 보류하는 데 사용되고 JavaScript 미디어 쿼리는 HTML 조작을 보류하는 데 사용됩니다.
CSS 조건부 준비
PostCSS를 사용하여 미디어 쿼리 불리언을 변수에 저장할 수 있는 미디어 쿼리 수준 5의 문법을 사용 설정했습니다.
@custom-media --motionOK (prefers-reduced-motion: no-preference);
JS 조건부 준비
JavaScript에서 브라우저는 미디어 쿼리를 확인하는 방법을 제공합니다. 구조 분해를 사용하여 미디어 쿼리 확인에서 불리언 결과를 추출하고 이름을 바꿨습니다.
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
그런 다음 motionOK
를 테스트하고 사용자가 모션 감소를 요청하지 않은 경우에만 문서를 변경할 수 있습니다.
if (motionOK) {
// document split manipulations
}
PostCSS를 사용하여 중첩 초안 1의 @nest
문법을 사용 설정하여 동일한 값을 확인할 수 있습니다. 이렇게 하면 애니메이션에 관한 모든 로직과 상위 요소 및 하위 요소의 스타일 요구사항을 한곳에서 저장할 수 있습니다.
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
PostCSS 맞춤 속성과 JavaScript 불리언을 사용하면 조건부로 효과를 업그레이드할 수 있습니다. 이제 다음 섹션으로 넘어가 문자열을 요소로 변환하는 JavaScript를 살펴봅니다.
텍스트 분할
텍스트 글자, 단어, 줄 등은 CSS 또는 JS로 개별적으로 애니메이션을 적용할 수 없습니다. 이 효과를 얻으려면 상자가 필요합니다. 각 문자에 애니메이션을 적용하려면 각 문자가 요소여야 합니다. 각 단어에 애니메이션을 적용하려면 각 단어가 요소여야 합니다.
- 문자열을 요소로 분할하는 JavaScript 유틸리티 함수 만들기
- 이러한 유틸리티의 사용 조정
문자 분할 유틸리티 함수
문자열을 사용하고 배열의 각 문자를 반환하는 함수로 시작하는 것이 좋습니다.
export const byLetter = text =>
[...text].map(span)
ES6의 스프레드 문법이 이 작업을 신속하게 처리하는 데 큰 도움이 되었습니다.
단어 분할 유틸리티 함수
문자를 분할하는 것과 마찬가지로 이 함수는 문자열을 사용하고 배열의 각 단어를 반환합니다.
export const byWord = text =>
text.split(' ').map(span)
JavaScript 문자열의 split()
메서드를 사용하면 자르려는 문자를 지정할 수 있습니다.
단어 사이의 구분을 나타내는 빈 공간을 전달했습니다.
상자 유틸리티 함수 만들기
이 효과를 사용하려면 각 문자에 상자가 필요하며 이러한 함수에서 map()
가 span()
함수로 호출되고 있음을 확인할 수 있습니다. 다음은 span()
함수입니다.
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
--index
라는 맞춤 속성이 배열 위치로 설정된다는 점에 유의해야 합니다. 문자 애니메이션의 상자가 있는 것은 좋지만 CSS에서 사용할 색인이 있으면 큰 영향을 미치는 작은 추가사항이 됩니다.
이 큰 영향에서 가장 주목할 만한 점은 놀라운 점입니다.
--index
를 사용하여 애니메이션을 오프셋하여 교차 모양을 만들 수 있습니다.
유틸리티 결론
완료된 splitting.js
모듈은 다음과 같습니다.
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
export const byLetter = text =>
[...text].map(span)
export const byWord = text =>
text.split(' ').map(span)
다음은 이러한 byLetter()
및 byWord()
함수를 가져오고 사용하는 것입니다.
분할 조정
분할 유틸리티를 사용할 준비가 되면 다음과 같은 이점이 있습니다.
- 분할할 요소 찾기
- 분할하고 텍스트를 HTML로 대체합니다.
그런 다음 CSS가 요소 / 상자에 애니메이션을 적용합니다.
요소 찾기
속성과 값을 사용하여 원하는 애니메이션에 관한 정보와 텍스트를 분할하는 방법을 저장했습니다. 이러한 선언적 옵션을 HTML에 배치하는 것이 좋았습니다. split-by
속성은 JavaScript에서 요소를 찾아 문자나 단어의 상자를 만드는 데 사용됩니다. letter-animation
또는 word-animation
속성은 CSS에서 요소 자식을 타겟팅하고 변환 및 애니메이션을 적용하는 데 사용됩니다.
다음은 두 속성을 보여주는 HTML 샘플입니다.
<h1 split-by="letter" letter-animation="breath">animated letters</h1>
<h1 split-by="word" word-animation="trampoline">hover the words</h1>
JavaScript에서 요소 찾기
속성 존재에 관한 CSS 선택자 문법을 사용하여 텍스트를 분할할 요소 목록을 수집했습니다.
const splitTargets = document.querySelectorAll('[split-by]')
CSS에서 요소 찾기
또한 CSS에서 속성 존재 선택기를 사용하여 모든 문자 애니메이션에 동일한 기본 스타일을 지정했습니다. 나중에 속성 값을 사용하여 더 구체적인 스타일을 추가하여 효과를 얻을 것입니다.
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
텍스트를 제자리에서 분할
JavaScript에서 찾은 각 분할 타겟의 경우 속성 값을 기반으로 텍스트를 분할하고 각 문자열을 <span>
에 매핑합니다. 그런 다음 요소의 텍스트를 만든 상자로 바꿀 수 있습니다.
splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter') {
nodes = byLetter(node.innerText)
}
else if (type === 'word') {
nodes = byWord(node.innerText)
}
if (nodes) {
node.firstChild.replaceWith(...nodes)
}
})
조정 종료
완료 시 index.js
:
import {byLetter, byWord} from './splitting.js'
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
if (motionOK) {
const splitTargets = document.querySelectorAll('[split-by]')
splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter')
nodes = byLetter(node.innerText)
else if (type === 'word')
nodes = byWord(node.innerText)
if (nodes)
node.firstChild.replaceWith(...nodes)
})
}
다음과 같은 영어로 자바스크립트를 읽을 수 있습니다.
- 일부 도우미 유틸리티 함수를 가져옵니다.
- 이 사용자에게 모션이 적합한지 확인합니다. 적합하지 않은 경우 아무것도 하지 않습니다.
- 분할하려는 각 요소에 대해
- 원하는 분할 방식에 따라 분할합니다.
- 텍스트를 요소로 바꿉니다.
애니메이션 및 전환 분할
위의 분할 문서 조작을 통해 CSS 또는 JavaScript로 다양한 애니메이션과 효과를 사용할 수 있게 되었습니다. 이 도움말 하단에는 분할 가능성을 높이는 데 도움이 되는 몇 가지 링크가 있습니다.
이제 이 기능으로 할 수 있는 작업을 보여주세요. CSS 기반 애니메이션과 전환 4가지를 공유하겠습니다. 🤓
문자 분할
다음 CSS는 글자 분할 효과의 기반으로 유용합니다. 모든 전환과 애니메이션을 모션 미디어 쿼리 뒤에 배치한 다음 각 새 하위 문자 span
에 디스플레이 속성과 공백 처리 스타일을 지정합니다.
[letter-animation] > span {
display: inline-block;
white-space: break-spaces;
}
공백 스타일은 공백으로만 이루어진 스팬이 레이아웃 엔진에 의해 접히지 않도록 하는 데 중요합니다. 이제 상태 저장 기능을 살펴보겠습니다.
전환 분할 문자 예시
이 예에서는 CSS 전환을 사용하여 텍스트 분할 효과를 적용합니다. 전환을 사용하려면 엔진이 애니메이션을 적용할 상태가 필요합니다. 저는 마우스 오버 없음, 문장 내 마우스 오버, 문자 위 마우스 오버라는 세 가지 상태를 선택했습니다.
사용자가 문장(즉, 컨테이너) 위로 마우스를 가져가면 사용자가 더 멀리 밀어낸 것처럼 모든 하위 요소의 크기를 줄입니다. 그런 다음 사용자가 문자를 가리키면 앞으로 가져옵니다.
@media (--motionOK) {
[letter-animation="hover"] {
&:hover > span {
transform: scale(.75);
}
& > span {
transition: transform .3s ease;
cursor: pointer;
&:hover {
transform: scale(1.25);
}
}
}
}
분할된 문자 애니메이션 예시
이 예에서는 사전 정의된 @keyframe
애니메이션을 사용하여 각 문자를 무한대로 애니메이션 처리하고 인라인 맞춤 속성 색인을 활용하여 지연 효과를 만듭니다.
@media (--motionOK) {
[letter-animation="breath"] > span {
animation:
breath 1200ms ease
calc(var(--index) * 100 * 1ms)
infinite alternate;
}
}
@keyframes breath {
from {
animation-timing-function: ease-out;
}
to {
transform: translateY(-5px) scale(1.25);
text-shadow: 0 0 25px var(--glow-color);
animation-timing-function: ease-in-out;
}
}
단어 분할
이 예시에서는 Flexbox가 컨테이너 유형으로 작동하여 ch
단위를 적절한 간격 길이로 활용했습니다.
word-animation {
display: inline-flex;
flex-wrap: wrap;
gap: 1ch;
}
전환 분할 단어 예시
이 전환 예에서는 마우스 오버를 다시 사용합니다. 이 효과는 처음에는 마우스 오버할 때까지 콘텐츠를 숨기므로 기기에 마우스 오버 기능이 있는 경우에만 상호작용과 스타일이 적용되도록 했습니다.
@media (hover) {
[word-animation="hover"] {
overflow: hidden;
overflow: clip;
& > span {
transition: transform .3s ease;
cursor: pointer;
&:not(:hover) {
transform: translateY(50%);
}
}
}
}
단어 분할 애니메이션 예시
이 애니메이션 예에서는 CSS @keyframes
를 다시 사용하여 일반 텍스트 문단에 엇갈린 무한 애니메이션을 만듭니다.
[word-animation="trampoline"] > span {
display: inline-block;
transform: translateY(100%);
animation:
trampoline 3s ease
calc(var(--index) * 150 * 1ms)
infinite alternate;
}
@keyframes trampoline {
0% {
transform: translateY(100%);
animation-timing-function: ease-out;
}
50% {
transform: translateY(0);
animation-timing-function: ease-in;
}
}
결론
이제 제가 어떻게 했는지 알았으니 어떻게 하시겠어요? 🙂
접근 방식을 다양화하고 웹에서 빌드하는 모든 방법을 알아보겠습니다. Codepen을 만들거나 자체 데모를 호스팅한 후 트윗으로 보내주시면 아래의 커뮤니티 리믹스 섹션에 추가해 드리겠습니다.
소스
더 많은 데모 및 아이디어
커뮤니티 리믹스
- CodeSandbox의 gnehcwu가 작성한
<text-hover>
웹 구성요소