WordPress에서 텍스트에 애니메이션을 추가하는 방법

멋진 텍스트 스타일은 시청자의 관심을 빠르게 사로잡습니다. WordPress 웹 사이트 소유자는 종종 텍스트에 애니메이션을 추가하는 방법을 묻습니다. 당연히 WordPress 사이트 텍스트를 디자인하는 몇 가지 방법을 찾을 수 있습니다. 조금 더 많은 코드가 필요한 HTML CSS 효과를 수동으로 추가할 수 있습니다. 그러나 코딩은 사이트에 사용자 지정 애니메이션을 추가하는 좋은 방법입니다. 다시 말하지만 최고의 위젯이 포함된 플러그인은 상대적으로 편리하고 효과적이며 대중적 입니다.

그러나 우리는 가능한 한 쉽게 두 기술을 다루려고 노력했습니다. WordPress 사이트를 운영하는 경우 블로그를 읽고 프로세스를 이해하는 데 시간을 할애하십시오. 단계와 지침을 제대로 따르면 자신의 애니메이션을 원활하게 사용자 정의할 수 있습니다.

WordPress에서 애니메이션 텍스트 효과를 추가하는 방법

애니메이션 텍스트 효과를 사용하여 WordPress 사이트에 감각과 개성을 더할 수 있습니다. 이 자습서에서는 이러한 효과를 추가하는 방법을 보여줍니다. 하지만 그 전에 애니메이션 텍스트와 그 역할에 대한 명확한 아이디어가 있어야 합니다. 배우자!

애니메이션 텍스트 효과란 무엇이며 어떻게 나타납니까?

애니메이션 텍스트 효과는 기사와 제목 에 약간의 재미와 흥분을 더할 수 있는 좋은 방법입니다. 멋진 애니메이션 텍스트 효과를 사용하도록 선택하면 다양한 효과를 만들 수 있습니다. 일부 효과는 텍스트 색상이나 크기를 변경하는 것과 같이 단순 하지만 일부는 깜박이거나 번쩍이는 텍스트 와 같은 상세한 애니메이션입니다.

애니메이션 텍스트는 일반 텍스트와 약간 다릅니다. 일반적으로 이러한 유형의 텍스트는 자체적으로 이동하지 않습니다. 대신 화면을 가로질러 움직이는 것처럼 보이게 하는 효과가 있습니다. 따라서 멋진 텍스트는 사람들 이 콘텐츠, 링크를 클릭하거나 이메일을 열 가능성을 높입니다.

웹사이트에서 애니메이션 텍스트의 역할

WordPress 테마에서 사용할 수 있는 다양한 유형의 애니메이션 텍스트 효과가 있지만 모두 동일한 기본 기능을 공유합니다. 그들은 텍스트의 색상이나 스타일을 변경하고 단순히 테스트 스타일을 변경합니다. 예를 들어 배경이 빨간색이고 흰색 텍스트가 "여기를 클릭하세요!"라는 "클릭 유도 문안" 버튼을 변경할 수 있습니다. 클릭했을 때.

멋진 텍스트가 포함된 애니메이션 제목 또는 영웅 섹션 은 다음과 같은 역할을 합니다.

• 디자인을 시각적으로 더 흥미롭게 만듭니다.
• 특별 제안 및 중요한 정보를 강조 표시합니다.
• 제품 기능을 눈에 띄게 만듭니다.
• 웹 사이트를 보다 대화식으로 만들고 비즈니스를 홍보합니다.

애니메이션 텍스트 효과를 추가하는 가장 쉬운 방법

WordPress 플러그인 사용

오늘날의 시장에서는 텍스트 스타일 지정 작업을 보다 쉽게 ​​수행할 수 있도록 다양한 종류의 플러그인을 제공합니다. ElementsKit은 강력한 플러그인 이자 Elementor 페이지 빌더용 애드온입니다. ElementsKit을 사용하면 모든 것을 하나의 후드 아래에서 얻을 수 있습니다.

멋진 애니메이션 텍스트는 ElementsKit pro에서 제공하는 인상적인 위젯입니다.

대시보드에 로그인 -> 페이지 또는 게시물 선택 -> ElementsKit으로 편집 클릭 -> ElementsKit 팬시 애니메이션 텍스트 위젯 검색 -> 위젯 끌어다 놓기

콘텐츠 섹션

이 부분은 Fancy Text 부분 이라고 하며 다음 필드를 포함합니다.

생기

• 애니메이션 스타일 – 여기서 두 가지 옵션은 텍스트 또는 SVG이며 둘 다 서로 다른 애니메이션 스타일을 만들 수 있습니다.
• 애니메이션 유형 – 애니메이션 유형에 따라 여기에서 다양한 선택을 할 수 있습니다.
• 표시 기간(ms) – 옵션 상자를 사용하여 애니메이션 기간을 밀리초 단위로 설정할 수 있습니다.
• Reveal Animation Delay (ms) – 여기에서 애니메이션 지연 시간을 조정합니다. 애니메이션이 나중에 시작하거나 처음부터 즉시 시작하거나 애니메이션 중간에 즉시 시작할 수 있도록 지정합니다.

콘텐츠

• 접두사 텍스트 – 여기에 표시하려는 접두사 콘텐츠를 작성해야 합니다. 멋진 애니메이션보다 먼저 작성된다는 의미입니다.
• Fancy Lists – 멋진 애니메이션을 위해 여기에 항목을 추가하십시오.
• 접미사 텍스트 - 표시할 접미사 콘텐츠를 작성합니다. 따라서 멋진 애니메이션 후에 지정됩니다.

• 제목 HTML 태그 – 여기에서 콘텐츠의 HTML 태그를 선택합니다.
• 링크(선택 사항) – 사용자가 다른 위치로 리디렉션하도록 하려면 링크를 추가합니다.

스타일 섹션

• 제목 텍스트 - 이 필드를 활용하여 제목 정렬, 타이포그래피, 색상 등을 조정합니다.
• Fancy Text Lists – 이 필드를 사용하여 타이포그래피, 색상 및 패딩을 조정합니다.
• Fancy Cursor – 이 필드를 사용하여 커서에 색상, 너비 및 높이를 지정하여 화려한 느낌을 줄 수 있습니다.

모든 필수 명령문을 편집하고 스타일을 지정한 후 업데이트를 클릭하고 프런트 엔드에서 변경 사항을 확인하십시오. 예를 들면 –

CSS 적용

WordPress에서 CSS 애니메이션을 만들 때 다음과 같은 기본적이면서도 중요한 사항을 염두에 두십시오 .

• 올바른 애니메이션 이름 설정 – CSS 애니메이션으로 요소를 이동할 때 요소에 표시되는 이름입니다. 예를 들어 "fadeIn"이라는 애니메이션이 있는 버튼이 있는 경우 이 속성에 사용할 값이 됩니다.
• animation-duration – 애니메이션이 완료되는 데 걸리는 시간(초)입니다. 또한 이것을 없음 또는 0으로 설정하여 애니메이션이 무기한 지속되거나 다른 일(예: 페이지 로드)이 발생할 때까지 지속되도록 할 수 있습니다.
• Animation-timing-function – 특정 시간(밀리초) 동안 걸리는 시간에 따라 요소가 한 지점에서 다른 지점으로 이동하는 방식을 제어합니다. 예를 들어 이 속성을 ease-out으로 설정하면 요소가 천천히 움직이기 시작한 다음 시작 부분에서 다시 시작하기 전에 지속 시간이 끝나면 속도가 빨라집니다.
• Animation-delay – 애니메이션이 완료된 후 다시 시작하기 전에 추가해야 하는 밀리초 수(예: 1초)를 지정하는 값입니다.
• Animation-iteration-count – 애니메이션을 재생하는 데 필요한 시간입니다. CSS 속성을 사용하면 이 반복을 계산할 수 있습니다.
• Animations-direction – 애니메이션이 재생되어야 하는 순서 또는 방향입니다. 정상, 반전, 대체 및 대체 반전이 될 수 있습니다.
• Animation-fill-mode – 이 값은 요소가 표시되는 방식을 지정합니다. 애니메이션이 적용되기 전과 후일 수 있습니다.
• @keyframes 알기 – 과정을 통해 변경되는 애니메이션의 속성과 해당 속성이 가져야 하는 값을 지정합니다. 예를 들어:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

일반적으로 백분율은 애니메이션의 타이밍을 나타내는 데 사용됩니다. 위의 키프레임은 요소의 배경색이 애니메이션을 통해 빨간색에서 노란색으로 25% 변환됨을 보여줍니다.

그러나 from 및 to 는 각각 0% 및 100% 대신 사용할 수 있습니다.

animate.css 파일 만들기

먼저 작업 중인 텍스트 편집기에서 필요한 모든 속성이 포함된 별도의 파일을 만들어야 합니다. 모든 애니메이션에 대한 키프레임을 선택할 수 있습니다 . 다음으로 WordPress 사이트의 모든 텍스트에 적용하려면 특정 CSS 클래스와 함께 배치해야 합니다.

CSS 파일에 간단한 코드를 작성하는 것부터 시작하십시오. 애니메이션 텍스트의 샘플 코드는 다음과 같습니다.

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

이제 이 키프레임을 CSS 클래스에 바인딩하기 위해 MyAnimation이라는 텍스트를 설정했습니다. 따라서 위의 코드 바로 다음에 파일에 아래 코드를 넣어야 합니다.

 .MyAnimation { animation-name: MyAnimation; }

여기에서 모든 기본 CSS 애니메이션 지식을 찾고 코드를 연습할 수 있습니다!

필요에 따라 이 절차를 반복하여 가능한 한 많은 애니메이션을 만들 수 있습니다. 그런 다음 파일을 animate.css로 저장합니다. 또는 Animate.css 파일을 다운로드할 수 있습니다 . 인기 있는 수많은 애니메이션 디자인에 대한 키프레임과 CSS 클래스가 포함된 잘 알려진 파일입니다. 또한 파일을 사용하면 복잡한 애니메이션을 코딩하는 수고를 덜 수 있습니다.

위의 코드는 h1 태그 ' MyAnimation '의 텍스트에 애니메이션을 적용합니다. "3s"를 다른 값 으로 변경하여 애니메이션 지속 시간을 변경할 수 있습니다. 16진수 값을 변경하여 색상을 변경할 수도 있습니다. CSS 파일을 저장하면 웹 사이트의 모양을 추가로 변경하고 CSS 파일을 편집할 수 있습니다. CSS 파일을 편집하여 글꼴, 텍스트 크기 및 텍스트 색상을 변경할 수 있습니다. CSS 파일을 변경하여 배경색과 헤더 크기를 변경할 수도 있습니다.

animate.css 파일을 WordPress 사이트에 로드하기

파일 작업을 완료한 후 테마 디렉토리에 업로드하십시오. 우리는 전체 프로세스를 세 단계로 나누었습니다.

1 단계

파일 전송 프로토콜(FTP)을 사용하여 사이트로 이동 -> FTP 클라이언트(FileZilla, WinSCP, Cyberduck 등) 선택 -> 호스팅 계정에서 필요한 자격 증명을 선택합니다.

2 단계

public_html 디렉토리에 액세스 -> wp-content로 이동 -> 테마 -> 활성 또는 하위 테마의 폴더 선택

3단계

이제 css라는 하위 디렉토리를 검색합니다. 가져오면 하위 디렉토리가 있는 Animate.css 파일에서 animate.css 또는 animate.min.css 파일을 업로드합니다.

그러나 하위 디렉터리 폴더가 없는 경우 새 폴더를 쉽게 만들 수 있습니다. 이를 위해 파일을 로드한 직후 간단한 편집을 수행하여 새 파일을 생성하면 완료됩니다.

functions.php를 통해 Animate 스타일시트 호출

활성 테마의 폴더에서 functions.php 파일을 찾을 수 있습니다. 이제 Animate 스타일시트를 호출하려면 이 코드 스니펫을 추가해야 합니다.

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Animate.css에서 animate.min.css 파일을 사용한 경우 animate.css 대신 마지막 줄에 animate.min.css를 작성해야 합니다 . 모든 변경 사항을 저장한 후 WordPress 대시보드로 이동합니다.

CSS 클래스를 사용하여 애니메이션 적용

이제 animate.css 파일에서 원하는 클래스를 적용하여 게시물과 페이지에서 다양한 애니메이션 효과를 볼 수 있습니다. 또한 Animate.css 파일을 사용하면 모든 항목의 전체 목록을 참조할 수 있습니다.

마지막으로 클래식 편집기에서 게시물 또는 페이지 선택 -> 텍스트 편집기로 전환 -> 블록 편집기인 경우 블록 도구 모음에서 점 3개 아이콘 클릭 -> HTML로 편집 선택 -> 애니메이션 추가 요소 태그에 대한 애니메이션 클래스 및 클래스 -> 미리보기

다음은 사이트에 애니메이션 텍스트를 추가하는 두 가지 효과적인 기술이며 사이트를 더욱 흥미롭고 시각적으로 매력적으로 만드는 데 도움이 될 수 있습니다. 이러한 기술 중 하나를 사용하여 페이지에 움직임과 흥미를 더할 수 있습니다.

하지만 코딩에 대한 개념이 없다면 CSS를 적용하는 것이 조금 어려울 수 있습니다. 따라서 WordPress에서 CSS 애니메이션을 만들려면 전문가의 도움을 받는 것이 좋습니다. 또는 ElementsKit 멋진 애니메이션 텍스트는 멋진 애니메이션을 빠르게 디자인할 수 있도록 지원하는 스마트 위젯입니다. 위젯을 사용하면 선택한 텍스트를 멋진 애니메이션으로 변환할 수 있습니다.