Blast.js로 텍스트를 애니메이션합니다

CSS 또는 JavaScript를 사용하는 HTML 요소는 오늘날 라이브러리의 도움 덕분에 다소 쉬운 작업입니다. 그러나 완전한 기존 요소 만 애니메이션 할 수 있습니다.

이것은 단락에서 단일 단어를 애니메이션하려면 단일 요소 (스팬과 같은)로 단어를 랩핑 한 다음 그에 따라 찾아야한다는 것을 의미합니다.

이와 같은 스팬 요소가 하나만 있으면 큰 문제는 아니지만 단락에서 모든 캐릭터를 애니메이션하려면 어떻게해야합니까? 각 캐릭터마다 스팬을 만들어야하므로 추가 마크 업을 추가하고 텍스트를 편집하기가 어렵습니다. 이것이 Blast.js가 존재하는 이유입니다.

키 포인트

blast.js는 HTML에서 단일 문자, 단어 또는 문장을 애니메이션 할 수있는 jQuery 플러그인입니다. 선택한 텍스트를 단일 요소 (예 : 범위)로 감고 해당 요소를 애니메이션으로하여이를 수행합니다.

플러그인은 요소를 선택하고 특정 단어 또는 문구를 검색하고 강조하고 애니메이션의 속도와 스타일을 제어하는 ​​기능을 포함하여 많은 사용자 정의 옵션을 제공합니다. 또한 텍스트의 기존 요소가 제거되거나 손상되지 않도록합니다.

Blast.js는 강력하지만 모든 사용자가 필요하지는 않습니다. 특히 애니메이션 텍스트가 필요하지 않은 사용자. 그러나 애니메이션 텍스트가 필요한 사람들의 경우 웹 페이지에 동적 및 대화식 요소를 추가하는 강력한 도구가 될 수 있습니다.

<.> blast.js는 무엇입니까?
• blast.js는 개별 문자, 단어 또는 문장을 애니메이션 할 수있는 jQuery 플러그인입니다. 이 기사에서는 Blast.js를 사용하는 방법을 이해할 수 있도록 몇 가지 예를 제공합니다. Blast.js를 사용하고 다음 예제를 시도하려면 Blast.js의 프로젝트 웹 사이트에서 찾을 수있는 blast.js 파일뿐만 아니라 jQuery가 필요합니다.
앞에서 언급했듯이 Blast.js를 사용하면 문자, 단어 또는 문장 주위에 요소를 만들 수 있지만 라이브러리는 이러한 옵션에만 국한되지 않습니다. 다음 섹션에서는 몇 가지 옵션을 소개하기위한 몇 가지 구체적인 예가 표시됩니다. 우리가 볼 수있는 옵션 목록은 완전한 옵션 목록이 프로젝트 웹 사이트에서 찾을 수 있습니다.
• 첫 번째 텍스트
에 애니메이션 이 첫 번째 예에서는 제목을 애니메이션하여 문자별로 올바른 캐릭터로 옮길 것입니다. 필요한 유일한 HTML 코드는 다음과 같습니다
• jQuery and Blast.js를 포함시킨 후,이 섹션의 다음 코드는 모두 jQuery의 준비된 핸들러의 사용자 정의 JavaScript 파일로되어 페이지가 준비되었는지 확인합니다.
이제 우리는 제목을 애니메이션 할 수 있습니다. 이 예에서는 $ ( 'h1')를 사용하여 요소를 찾는 것만으로 충분하지만 귀하의 경우 적합한 선택기를 사용하여 요소를 찾습니다.

blast.js는 jQuery 오브젝트에 새 메소드를 제공합니다. .blast ()는 매개 변수를 허용합니다. 사용하려는 모든 옵션을 나열하는 객체입니다. 이 첫 번째 예에서는 '문자'라는 옵션 구분 기호 하나만 사용하여 문자별로 타이틀 캐릭터를 애니메이션하고 싶다는 것을 나타냅니다.

우리가 매개 변수를 포함하지 않으면 기본값 '단어'( "문자가 아닌"이 아닌 기본값이 사용되므로 모든 단어 주위에서 생성됩니다 (여기서 원하는 모든 문자가 아님). >

이 방법으로, 간단한 H1 요소가 애니메이션되고 다음 DOM이 생성됩니다.

단어 사이의 공간은 보존되었으며 스팬으로 캡슐화되지 않았다는 점에 유의하십시오.

이제 생성 된 스팬 요소를 검색해야합니다. 예를 들어 $ ( '. blast')를 시도 할 수 있지만 더 쉬운 방법이 있습니다. 기본적으로 .blast () 메소드는 생성 된 요소를 반환하므로 이러한 요소를 검색하기 위해 변수에만 저장하면됩니다.

<h1 id="">></h1>Hello World!>

생성 된 요소를 얻는 것이 유용하지만 항상 그런 것은 아닙니다. 따라서 .BLAST () 메소드가 생성 된 요소 대신에 부모 요소 (애니메이션중인 기본 요소)를 반환하려면 다른 옵션을 사용할 수 있습니다. returnGenerated. 기본적으로 true로 설정되며 부모 요소가 있습니다.

우리가 수집 한 요소를 애니메이션하기 위해 예제로 돌아가 봅시다. 우리는 jQuery의 .Each () 메소드를 사용하여 각 캐릭터 문자를 문자별로 애니메이션합니다.

$(function() {
  // 动画代码
});

.Each () 메소드는 jQuery 객체에 저장된 각 요소에 대한 함수를 실행합니다. 다음은 의견에 설명 된 우리가 사용할 기능입니다.

코드 설명 : 먼저 $ (this)를 사용하여 현재 요소 (이 경우 현재 문자)를 검색합니다. 우리는 상대 위치를 0으로 초기화하고 마지막 으로이 위치를 애니메이션합니다.

코드의 해당 주석에 표시된대로 .Delay () 메소드는 정의 된 밀리 초 후에 애니메이션을 시작합니다. i * 45를 사용하여 jQuery가 제공 한 카운터입니다 (매개 변수로 전달). . 첫 번째 캐릭터의 경우 0과 같으므로 애니메이션이 즉시 시작된 다음 1과 같고 두 번째 캐릭터는 45 밀리 초 후에 애니메이션됩니다.

우리의 애니메이션이 준비되어 있고 실행할 수 있습니다! 아래의 라이브 예에서 볼 수 있습니다.

$('h1').blast({
  delimiter: 'character'
});

포장 요소를 선택하십시오 기본적으로 스팬 요소가 생성되는데, 이는 보통 우리가 원하는 것입니다. 그러나 때때로 우리는 Strong, Em 및 Div 및 p와 같은 다른 요소를 사용하고 싶습니다. Blast.js의 경우 가능합니다.

이렇게하려면 다음 예에서는 각 단어가 임의의 색상으로 스타일링되고 EM 요소에 캡슐화되는 단락을 만듭니다.

먼저, 우리는 임의의 숫자를 제공 할 수있는 함수가 필요합니다. 원본 JavaScript에서 사용할 수있는 Math.random ()의 수정 된 버전을 사용합니다.

<h1 id="class-blast-root"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

이 새로운 기능은 Min과 Max 사이의 임의의 정수를 제공하며,이 기능은 함수에 인수로 전달됩니다.

이제 우리는 단락을 채색 할 준비가되었습니다. 먼저, 우리는 Delimiter 'Word'를 사용하여 단락을 애니메이션합니다. 우리는 새로운 옵션을 추가했습니다. Tag는 Blast.js가 원하는 태그를 생성하는 데 사용할 태그를 표시 할 수 있습니다. 기본 '스팬'대신 'em'으로 설정했습니다.

이제 우리의 모든 단어는 EM 태그에 캡슐화되었습니다. 각 태그마다 jQuery의 .css () 메소드와 사용자 정의 rand () 함수를 사용하여 새 색상을 정의합니다.

<h1 id="">></h1>Hello World!>

다음, 부모 요소의 초기 상태를 검색하는 방법 (즉, 추가 생성 된 태그를 모두 제거하는 방법)을 검색하는 방법을 설명하기 위해 다른 코드 줄을 추가합니다.

이렇게하려면 .BLAST () 메소드에 잘못된 값을 할당 할 수 있습니다. 이것은 Blast.js 에게이 메소드를 사용하여 이전 호출에 의해 추가 된 모든 태그가 제거 될 것이라고 말합니다.

아래의 라이브 버전 에서이 예를 볼 수 있습니다. 효과를 확인하려면 페이지에 표시된 기존 단어 중 하나를 입력하십시오.

$(function() {
  // 动画代码
});

blast.js 로 검색하십시오 기본적으로 Blast.js는 텍스트의 모든 단어, 문자 또는 문장 주위에 요소를 만듭니다. 그러나 하나의 단어 나 단어 그룹을 찾을 수도 있습니다. blast.js는 단어 나 문구의 각 모양을 요소로 캡슐화 할 수 있습니다. 이렇게하려면 값이 Delimiter 옵션이 아닌 문자열 인 검색 옵션을 사용합니다.

데모의 경우 입력 및 제출 버튼이있는 양식을 만듭니다. 사용자는 특정 단락에서 검색 할 입력에 단어를 표시 한 다음 Blast.js는 검색 된 용어를 SPAN 요소로 캡슐화합니다.

우리는 양식에서 제출 이벤트를 사용하여이를 수행합니다.

지침 e.preventDefault ()는 양식의 기본 동작을 비활성화하는 데 사용됩니다.

우리는 올바른 선택기를 사용하여 첫 번째 값으로 .blast () 메소드를 적용하기 전에 단락을 검색합니다. 이러한 방식으로, 사용자가 이전에 다른 검색을 수행 한 경우 이러한 검색이 지워집니다.

다음으로 .BLAST () 메소드를 다시 사용합니다. 이번에는 검색에 필요한 용어입니다. 이를 위해 검색 옵션을 사용하여 입력 값을 제공합니다. 다른 두 가지 옵션은 필수는 아니지만 귀하에게 그들의 존재를 보여 드리고 싶습니다.

CustomClass 옵션을 사용하면 생성 된 요소에 자신의 클래스 이름을 추가 할 수 있습니다. 이전 예제에서 생성 된 요소를 살펴보면 분명히 폭발 클래스가 있음을 분명히 알 수 있습니다. CustomClass를 사용하면 하나 이상의 클래스를 추가 할 수 있습니다.

GenerateIndexId 옵션은 부울 값입니다. true로 설정하면 생성 된 각 요소에 ID를 추가합니다. 작동하려면 CustomClass 옵션이 필요합니다. 여기서는 클래스 검색을 선택하므로 첫 번째 생성 요소에는 ID Search-1이 있고 두 번째 요소에는 Search-2 등이 있습니다.

예제를 유용하게하려면 생성 된 요소를 강조하기 위해 CSS에 몇 가지 규칙을 추가해야합니다. 예를 들어 다음 규칙을 적용 할 수 있습니다.

$('h1').blast({
  delimiter: 'character'
});

아래의 라이브 버전 에서이 예를 볼 수 있습니다. 효과를 확인하려면 페이지에 표시된 기존 단어 중 하나를 입력하십시오.

기존 요소는 어떻습니까?

Blast.js의 작동 방식을 이해 한 후에는 이제 대답해야 할 중요한 질문이 있습니다. .BLAST () 메소드를 컨테이너에 적용 하므로이 컨테이너가 텍스트 노드 외에 다른 요소가 포함되어 있으면 어떻게됩니까? 예를 들어, 폭발을 다음 단락에 적용하면 어떻게해야합니까?

blast.js는 Dom Tree를 파괴하지 않습니다. 이 경우 기존 스팬 요소가 제거되지 않고 새로운 SPAN 요소 (폭발 클래스와 함께)가 생성됩니다. 위의 단락에서 $ ( 'p'). blast ()를 실행하면 다음 결과를 생성합니다.

마지막 :이 기존 스팬 요소가 실제로 Blast.js에 의해 생성 된 Span 요소라면 어떨까요? 답은 당신이하고 싶은 일에 달려 있습니다.

<h1 id="">></h1>Hello World!>

우리가 .BLAST () 메소드를 단락에 적용하고 Delimiter 옵션을 'Word'로 설정한다고 가정합니다. 동일한 메소드를 다시 적용하면 동일 한 경우에도 새 요소를 작성하기 전에 이전에 생성 된 요소가 제거됩니다. 새 통화는 분리기 대신 검색을 사용하는 것이 사실입니다.

그러나 용어를 검색하고 .blast () 메소드를 다시 호출하여 새 용어를 검색하면 이전 검색이 제거되지 않습니다. 이전 섹션의 마지막 예제에서 .blast (false) 호출을 제거하십시오. 이 경우 새 검색이 강조되지만 이전 검색도 강조 표시됩니다.

$(function() {
  // 动画代码
});

어쨌든 blast.js는 모든 사람에게 유용하지 않으며 어떤 사람들은 그것이 완전히 불필요하다고 생각할 수도 있습니다. 그러나 텍스트를 애니메이션하려면 아마도 찾을 수있는 최고의 옵션 중 하나 일 것입니다.

위에서 언급했듯이 생성 된 요소를 사용자 정의하기위한 다른 옵션을 찾을 수 있습니다. Aria 속성을 비활성화하도록 선택할 수도 있습니다.

창의적인 방식으로 사용하는 방법에 대한 아이디어가 있거나이 도구 또는 다른 도구를 사용하여 텍스트를 애니메이션하는 경우 토론에서 언제든지 알려주십시오.

blast.js

를 사용하여 애니메이션 텍스트의 FAQS (FAQ) 내 프로젝트에 blast.js를 설치하는 방법은 무엇입니까?

<.> 프로젝트에 blast.js를 설치하려면 NPM 또는 Bower를 사용할 수 있습니다. NPM을 사용하는 경우 명령 NPM 설치 Blast-Text를 실행하여 설치할 수 있습니다. Bower를 사용하는 경우 명령은 Bower 설치 Blast-Text입니다. 설치 후 스크립트 태그를 사용하여 HTML 파일에 포함시킬 수 있습니다. jQuery 플러그인이기 때문에 blast.js 전에 jQuery를 포함해야합니다.

Blast.js의 다른 분리기는 무엇입니까?

blast.js는 캐릭터, 단어, 문장 및 요소의 네 가지 구분자를 제공합니다. 캐릭터 분리기는 텍스트를 단일 문자로 나눕니다. 분리기라는 단어는 텍스트를 단어로 나눕니다. 문장 분리기는 텍스트를 문장으로 나눕니다. 요소 분리기는 텍스트를 HTML 요소로 나눕니다.

Blast.js를 애니메이션 텍스트에 사용하는 방법은 무엇입니까?

<.> blast.js를 사용하려면 텍스트를 애니메이션에 사용하려면 먼저 jQuery를 사용하여 애니메이션 할 텍스트를 선택해야합니다. 그런 다음 .blast () 메소드를 사용하여 텍스트를 조각으로 나눌 수 있습니다. 그런 다음 CSS 또는 JQuery를 사용하여 이러한 클립을 애니메이션 할 수 있습니다.

jQuery없이 blast.js를 사용할 수 있습니까?

<.> 아니요, blast.js는 jQuery 플러그인이므로 jQuery가 작동해야합니다. Blast.js를 포함하여 프로젝트에 jQuery를 포함시켜야합니다.

blast.js에서 사용자 정의 구분자를 사용하는 방법?

blast.js에서 사용자 정의 구분기를 사용하려면 .blast () 메소드에 정규 표현식을 전달할 수 있습니다. 정규 표현식은 분리기로 사용하려는 문자와 일치해야합니다.

왜 내 Blast.js 애니메이션이 작동하지 않습니까?

<.> blast.js 애니메이션이 작동하지 않으면 몇 가지 이유가있을 수 있습니다. 먼저 프로젝트에 JQuery 및 Blast.js를 포함시켜야합니다. 둘째, .blast () 메소드를 올바르게 사용하는지 확인하십시오. 셋째, CSS 또는 JQuery 애니메이션 코드가 올바른지 확인하십시오.

Blast.js를 사용하여 HTML 요소를 애니메이션 할 수 있습니까?

예, Blast.js를 사용하여 HTML 요소를 애니메이션 할 수 있습니다. 요소 분리기를 사용하여 HTML을 개별 요소로 분해 한 다음 CSS 또는 JQuery를 사용하여 애니메이션 할 수 있습니다.

Blast.js 애니메이션의 속도를 제어하는 ​​방법?

Blast.js 애니메이션의 속도는 Blast.js 자체가 아니라 CSS 또는 JQuery 애니메이션 코드에 의해 제어됩니다. 애니메이션 코드에서 지속 시간 매개 변수를 변경하여 속도를 조정할 수 있습니다.

다른 JavaScript 라이브러리와 함께 Blast.js를 사용할 수 있습니까?

예, 다른 JavaScript 라이브러리와 함께 Blast.js를 사용할 수 있습니다. 그러나 Blast.js는 jQuery 플러그인이므로 프로젝트에 jQuery를 포함해야합니다.

내 텍스트에서 Blast.js 효과를 제거하는 방법은 무엇입니까?

텍스트에서 blast.js 효과를 제거하려면 .unblast () 메소드를 사용할 수 있습니다. 이 방법은 텍스트를 원래 상태로 복원하여 모든 Blast.js 효과를 제거합니다.

위 내용은 Blast.js로 텍스트를 애니메이션합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!