10가지 놀라운 애니메이션 텍스트 CSS 및 JavaScript 코드 조각
게시 됨: 2021-03-09기본 CSS와 몇 줄의 JavaScript로 꽤 눈부신 텍스트 효과를 만들 수 있습니다. 이러한 효과는 텍스트 표시 애니메이션에서 3D 회전 또는 상상할 수 있는 모든 것에 이르기까지 다양합니다.
그리고 이 포스트에서 나는 당신이 약간의 양식화된 텍스트와 CSS 코드로 무엇을 할 수 있는지 보여주는 웹에서 가장 멋진 예 10가지를 분류했습니다.
이 CSS 애니메이션 도구를 좋아할 수도 있습니다.
1. 타이틀 애니메이션
Robin Treur의 이 애니메이션 타이틀 효과는 많은 영화나 비디오 게임의 스타일을 따릅니다. 글자는 약간의 대각선 경사와 함께 CSS3 텍스트 그림자를 사용하여 돌출된 3D 효과를 나타냅니다.
페이드 인 애니메이션 스타일은 동일한 비스듬한 텍스트로 1930년대의 고전 영화를 연상시킵니다. 모든 것은 CSS를 통해 제어되지만 "다시 시작" 버튼은 JavaScript를 사용하여 빌드됩니다. 이렇게 하면 애니메이션을 여러 번 재생하여 더 나은 모습을 얻을 수 있습니다.
2. 산산조각
깨진 조각 텍스트를 만드는 것은 After Effects와 같은 도구로 간단한 작업이지만 코드로 텍스트 조각 애니메이션을 만드는 것은 훨씬 더 어렵기 때문에 Arsen Zbidniakov의 이 펜은 매우 인상적입니다.
텍스트는 실제로 애니메이션 프로세스를 좀 더 쉽게 만드는 SVG 모양을 사용하여 작성되었습니다. 이것은 또한 평소처럼 텍스트를 선택, 복사 또는 상호 작용할 수 없음을 의미합니다.
그러나 로고나 다른 비대화형 페이지 요소에 사용하는 경우 사이트에 유사한 효과를 추가할 수 있습니다.
3. 뒤틀린 글자
개발자 Mamun Khandaker는 이 꼬인 글자 애니메이션 모음을 만들었습니다. 각 애니메이션 스타일은 이름이 다르며 하나의 펜에서 모두 탐색할 수 있습니다.
도구/웹 앱의 랜딩 페이지나 홈페이지에서 이러한 텍스트 효과가 사용되는 것을 볼 수 있었습니다. 이들은 즉시 주의를 끌며 방문자에게 지속적인 인상을 남깁니다. 게다가 그것들은 모두 100% 순수 CSS로 만들어졌으며 매우 쉽게 조정할 수 있습니다.
4. 픽셀 알파벳
이 독특한 애니메이션 픽셀 효과는 확실히 이상하지만 이상하게 매혹적입니다. 주로 JavaScript에 의존하며 개발자 Georgi Nikoloff가 HTML5 캔버스 요소를 사용하는 방법으로 만들었습니다.
Noto Serif를 글꼴 기반으로 사용하고 문자를 캔버스 요소 내부의 가단성 요소로 변환합니다. JavaScript는 문자를 더 작은 점으로 나누고 이것이 애니메이션의 기초를 형성합니다.
이것이 실용화될 것이라고 말할 수는 없지만 웹 애니메이션이 얼마나 발전했는지에 대한 증거입니다.
5. 캐러셀 입력
이 효과는 소규모 포트폴리오와 대행사 웹사이트에서 유명합니다. 타이핑 텍스트 애니메이션은 종종 사이트 헤더에 나타나며 누군가가 워드 프로세서에서 타이핑하는 모습을 모방합니다.
CSS와 JavaScript 애니메이션이 잘 혼합된 하나의 요소 안에 모든 것이 포함되어 있습니다. 때때로 당신은 웹사이트가 그들의 작업, 그들의 이력, 또는 그들이 함께 일한 클라이언트에 대한 설명을 나열하기 위해 이것을 사용하는 것을 볼 것입니다.
적당히 사용하면 확실히 재미있는 효과입니다. 한 번에 하나의 단어만 표시되기 때문에 페이지의 가독성이 제한되지만 드물게 사용하면 누구나 복사할 수 있는 매우 멋진 효과입니다.
6. 타이거 타이거
William Blake의 시 "Tyger"에서 단어를 빌리면 Joseph Martucci의 이 매우 독특한 애니메이션이 정말 눈길을 사로잡습니다.
여기서 초점은 내용이 아니라 활자체 스타일과 애니메이션입니다. 텍스트의 각 "세그먼트"에는 텍스트 윤곽선과 빛나는 효과가 있는 고유한 스타일이 있습니다. setTimeout() 을 사용하여 순차적으로 텍스트에 애니메이션 효과를 주기 위해 홈페이지 스타일을 지정하는 방법의 좋은 예입니다.
7. SVG 스냅
오픈 소스 Snap.svg 라이브러리를 사용하면 누구나 약간의 코드로 고해상도 SVG 이미지를 만들 수 있습니다. 이것은 Illustrator와 같은 프로그램을 배우는 것보다 훨씬 쉽고 Alexis Blondin이 만든 이 재미있는 예제처럼 애니메이션을 만들 수 있습니다.
애니메이션에 사용된 임의의 문자를 포함하여 모든 문자는 JavaScript를 통해 동적으로 생성됩니다. 최신 SVG 지원은 거대하며 이러한 이미지 유형은 향후 몇 년 동안 웹 사이트 구축 방식을 근본적으로 바꿀 수 있습니다. 이 Snap.svg 애니메이션은 한 가지 예일 뿐이며 확실히 멋진 애니메이션입니다.
8. 브래킷 애니메이션
여기 내가 항상 보는 또 다른 일반적인 텍스트 애니메이션 기술이 있습니다. 페이지의 rolodex와 거의 같은 회전 텍스트가 있는 대괄호를 사용합니다.
이 애니메이션은 CSS만으로 만들 수 있다는 점을 제외하고 앞서 언급한 타이핑 캐러셀 효과를 모방합니다. 한 CSS 키프레임에서 다른 키프레임으로 이동하는 사용자 정의 반복 애니메이션에 의존하며, 각 프레임은 회전하는 텍스트에서 다른 단어나 구를 표시합니다.
이 효과는 홈페이지에서 훨씬 미묘하고 읽기 쉽습니다. 홈페이지에 사용할 멋진 텍스트 효과를 찾고 있다면 탁월한 선택이 될 것입니다.
9. 언브레이커블 키미 슈미트
이 달콤한 로고 효과는 Netflix 시리즈 "Unbreakable Kimmie Schmidt"에서 차용했습니다. 텍스트 스타일과 사용자 정의 애니메이션을 포함한 모든 것이 CSS로 생성됩니다.
페이지 본문에는 애니메이션을 시작하는 클래스가 있으며 이 클래스는 JavaScript를 사용하여 페이지에 추가됩니다. 거기에서 그것은 모두 순수한 CSS입니다. 놀라울 정도로 사실적인 튀는 효과를 만들기 위해 대부분 많은 변형을 사용합니다.
CSS3를 사용하는 방법을 안다면 CSS3가 얼마나 많은 일을 할 수 있는지에 대한 또 다른 예입니다.
10. SVG 텍스트 채우기
마지막으로 상자 그림자와 CSS 획 속성을 혼합하여 사용하는 매우 독특한 SVG 필러 애니메이션에 도달했습니다.
이 텍스트는 전적으로 SVG로 작성되었지만 일반 텍스트처럼 문자를 복사/붙여넣기할 수 있도록 선택도 가능합니다. 모든 브라우저와 완벽하게 호환되며 애니메이션은 모든 웹사이트에 들어갈 수 있을 정도로 미묘합니다.
이 모든 텍스트 애니메이션은 테이블에 새로운 것을 가져다줍니다. 자신의 작업에서 모두 실용적이거나 사용 가능하지 않을 수도 있지만 올바른 접근 방식으로 거의 모든 것이 가능하다는 것을 증명합니다.