用blast.js動畫文字

借助庫的幫助，如今使用 CSS 或 JavaScript 動畫化 HTML 元素或多或少是一項簡單的任務。但是，你只能動畫化完整的現有元素。

這意味著，如果你想動畫化段落中的單個單詞，你必須將單詞包裝在單個元素（如 span）中，然後相應地定位它。

如果你只有這樣一兩個 span 元素，這不是什麼大問題，但如果你想動畫化段落中的每個字符呢？對於每個字符，你都必須創建一個 span，這會添加許多額外的標記，並使文本難以編輯。這就是 Blast.js 存在的原因。

關鍵要點

• Blast.js 是一個 jQuery 插件，允許動畫化 HTML 中的單個字符、單詞或句子。它通過將選定的文本包裝在單個元素（如 span）中，然後動畫化這些元素來實現這一點。
• 該插件提供了許多自定義選項，包括選擇包裝元素、搜索和突出顯示特定單詞或單詞組以及控制動畫速度和样式的能力。它還確保文本中現有的元素不會被移除或損壞。
• 儘管 Blast.js 功能強大，但並非所有用戶都需要它，特別是那些不需要動畫化文本的用戶。但是，對於那些需要動畫化文本的用戶來說，它可以成為在網頁中添加動態和交互元素的強大工具。

什麼是 Blast.js？

Blast.js 是一個 jQuery 插件，允許你動畫化單個字符、單詞或句子。在本文中，我將提供一些示例，以便你可以了解如何使用 Blast.js。要使用 Blast.js 並嘗試下面的示例，你需要 jQuery 以及 Blast.js 文件，該文件可以在 Blast.js 的項目網站上找到。

如前所述，Blast.js 允許我們在字符、單詞或句子周圍創建元素，但該庫不僅限於這些選項。在下一節中，我們將看到一些具體的示例來介紹一些選項。我們將看到的選項列表並非詳盡無遺；完整的可用選項列表可以在項目的網站上找到。

動畫化我們的第一段文本

在這個第一個示例中，我們將動畫化一個標題，逐個字符地將它們向右移動。唯一需要的 HTML 代碼如下：

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

在包含 jQuery 和 Blast.js 之後，本部分中的下一段代碼將全部位於 jQuery 的 ready 處理程序中的自定義 JavaScript 文件中，以確保頁面已準備好：

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

現在我們可以動畫化我們的標題了。在我們的示例中，僅使用 $('h1') 來定位元素就足夠了，但在你的情況下，你將使用任何合適的選擇器來定位元素。

Blast.js 在 jQuery 對像上提供了一種新方法：.blast()，它接受一個參數：一個列出所有你想要使用的選項的對象。在這個第一個示例中，我們將只使用一個選項 delimiter: 'character'，表示我們想要逐個字符地動畫化我們的標題。

如果我們沒有包含該參數，則將使用默認值'word'（而不是“character”，因此將在每個單詞（而不是每個字符，就像我們在這裡想要的那樣）周圍創建一個span。

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

這樣，我們的簡單 h1 元素將被動畫化，並將生成以下 DOM：

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

請注意，單詞之間的空格已被保留，並且沒有被封裝到 span 中。

現在，我們需要檢索生成的 span 元素。例如，你可以嘗試 $('.blast')，但是有一種更簡單的方法。默認情況下，.blast() 方法返回生成的元素，因此你只需要將它們存儲在一個變量中即可檢索這些元素。

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

獲取生成的元素很有用，但並非一直如此。因此，如果你希望 .blast() 方法返回父元素（你正在動畫化的主要元素）而不是生成的元素，可以使用另一個選項：returnGenerated。默認情況下，它設置為 true；將其設置為 false，你將擁有你的父元素：

<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">!>
>

讓我們回到我們的示例，來動畫化我們收集的元素。我們將藉助 jQuery 的 .each() 方法，逐個字符地動畫化每個字符。

.each() 方法將為存儲在 jQuery 對像中的每個元素執行一個函數。以下是我們將使用的函數，在註釋中進行了解釋。

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

代碼解釋：首先，我們使用 $(this) 檢索當前元素（在本例中為當前字符）。我們將其相對位置初始化為零，最後，我們動畫化此位置。

如代碼中相應的註釋所示，.delay() 方法在定義的毫秒數後啟動動畫，使用 i * 45，其中 i 是 jQuery 提供的計數器（我們將其作為參數傳遞）。對於第一個字符，i 等於 0，因此動畫立即啟動，然後它等於 1，第二個字符在 45 毫秒後動畫化，依此類推。

我們的動畫已準備就緒，並且可以運行！你可以在下面的實時示例中查看。

選擇你的包裝元素

默認情況下，會創建 span 元素，這通常是我們想要的。但有時我們想使用其他元素，例如 strong、em 甚至 div 和 p。使用 Blast.js，這是可能的。

為此，在我們的下一個示例中，我們將創建一個段落，其中每個單詞都將使用隨機顏色進行樣式化並封裝在 em 元素中。

首先，我們需要一個函數來為我們提供一個隨機數。我們將使用在原生 JavaScript 中可用的修改後的 Math.random() 版本。

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

這個新函數將為我們提供 min 和 max 之間的隨機整數，這些整數作為參數傳遞到函數中。

現在我們準備為我們的段落著色了。首先，我們使用 delimiter 'word' 動畫化我們的段落。我們添加了一個新選項：tag，它允許我們指示我們希望 Blast.js 使用的標籤來生成元素。我們將它設置為 'em'，而不是默認的 'span'。

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

現在我們所有的單詞都被封裝在 em 標籤中了。對於每個標籤，我們使用 jQuery 的 .css() 方法和我們的自定義 rand() 函數定義一個新的顏色：

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

接下來，我們將添加另一行代碼來介紹如何檢索父元素的初始狀態（即如何移除所有這些額外的生成的標籤）。

為此，你可以為 .blast() 方法賦予 false 值。這告訴 Blast.js，將移除使用此方法的先前調用添加的所有標籤。

你可以在下面的實時版本中查看此示例。嘗試鍵入頁面上顯示的現有單詞之一以查看效果。

使用 Blast.js 搜索

默認情況下，Blast.js 將在文本中的每個單詞、字符或句子周圍創建元素。但你也可以只定位一個單詞或一組單詞：Blast.js 然後將單詞或單詞組的每個出現都封裝到一個元素中。為此，我們將使用 search 選項，其值為字符串，而不是 delimiter 選項。

為了演示，我們將創建一個包含輸入和提交按鈕的表單。用戶將在輸入中指示要在特定段落中搜索的單詞，然後 Blast.js 將將搜索的術語封裝到 span 元素中。

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

我們將使用表單上的提交事件來執行此操作。

<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">!>
>

指令 e.preventDefault(); 用於禁用表單的默認行為，即提交表單。

我們在第一次使用 false 值應用 .blast() 方法之前，使用正確的選擇器檢索我們的段落。這樣，如果用戶之前執行了其他搜索，這些搜索將被清除。

接下來，我們再次使用 .blast() 方法，這次是搜索所需的術語。為此，我們使用 search 選項，為其提供輸入的值。另外兩個選項不是強制性的，但我希望向你展示它們的存在。

customClass 選項允許我們將我們自己的類名添加到生成的元素中。如果你查看了前面示例中生成的元素，你肯定會看到它們都具有 blast 類。使用 customClass，你可以添加一個或多個類。

generateIndexID 選項是一個布爾值。設置為 true，它將向每個生成的元素添加一個 ID。要工作，它需要使用 customClass 選項。在這裡，我們選擇了類 search，因此第一個生成的元素將具有 ID search-1，第二個元素將具有 search-2，依此類推。

為了使我們的示例有用，我們需要在 CSS 中添加一些規則來突出顯示生成的元素。例如，你可以應用以下規則。

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

你可以在下面的實時版本中查看此示例。嘗試鍵入頁面上顯示的現有單詞之一以查看效果。

現有元素呢？

在我們了解了 Blast.js 的工作原理之後，現在有一個重要的問題需要回答。由於我們將 .blast() 方法應用於容器，如果此容器除了文本節點之外還包含其他元素會怎樣？例如，如果我們將爆炸應用於以下段落會怎樣？

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

Blast.js 不會破壞你的 DOM 樹。在這種情況下，現有的 span 元素不會被移除，並且會創建一個新的 span 元素（帶有 blast 類）。通過對上述段落執行 $('p').blast()，我們將生成以下結果：

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

最後：如果這個現有的 span 元素實際上是由 Blast.js 生成的 span 元素呢？答案取決於你想要做什麼。

假設我們將.blast() 方法應用於一個段落，並將delimiter 選項設置為'word'，如果我們再次應用相同的方法，則在創建新元素之前，將移除先前生成的元素，即使新的調用使用搜索而不是分隔符也是如此。

但是，如果你搜索了一個術語，並再次調用 .blast() 方法來搜索一個新術語，則舊的搜索不會被移除。在我們上一部分的最後一個示例中，嘗試移除 .blast(false) 調用。在這種情況下，將突出顯示新的搜索，但舊的搜索也將保持突出顯示。

總之

Blast.js 並非對每個人都有用，有些人可能會認為它完全沒有必要。但是，如果你想動畫化文本，這可能是你能找到的最佳選項之一。

如上所述，你可以找到其他選項來自定義生成的元素。你甚至可以選擇禁用 ARIA 屬性。

如果你對如何以創造性的方式使用它有任何想法，或者如果你使用過這個或其他工具來動畫化文本，請隨時在討論中告訴我們。

關於使用 Blast.js 動畫化文本的常見問題解答 (FAQ)

如何在我的項目中安裝 Blast.js？

要在你的項目中安裝 Blast.js，你可以使用 npm 或 Bower。如果你使用 npm，你可以通過運行命令 npm install blast-text 來安裝它。如果你使用 Bower，則命令是 bower install blast-text。安裝後，你可以使用 script 標籤將其包含在你的 HTML 文件中。記住在 Blast.js 之前包含 jQuery，因為它是一個 jQuery 插件。

Blast.js 中有哪些不同的分隔符？

Blast.js 提供了四個不同的分隔符：character、word、sentence 和 element。 character 分隔符將文本分解成單個字符。 word 分隔符將文本分解成單詞。 sentence 分隔符將文本分解成句子。 element 分隔符將文本分解成 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 元素。你可以使用 element 分隔符將 HTML 分解成單個元素，然後使用 CSS 或 jQuery 來動畫化它們。

如何控制 Blast.js 動畫的速度？

Blast.js 動畫的速度由 CSS 或 jQuery 動畫代碼控制，而不是由 Blast.js 本身控制。你可以通過更改動畫代碼中的 duration 參數來調整速度。

我可以將 Blast.js 與其他 JavaScript 庫一起使用嗎？

是的，你可以將 Blast.js 與其他 JavaScript 庫一起使用。但是，由於 Blast.js 是一個 jQuery 插件，你需要在你的項目中包含 jQuery。

如何從我的文本中移除 Blast.js 效果？

要從你的文本中移除 Blast.js 效果，你可以使用 .unblast() 方法。此方法將文本恢復到其原始狀態，移除所有 Blast.js 效果。

以上是用blast.js動畫文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！