jQuery文字動畫插件相關介紹

今天為大家介紹的是一款簡單、高性能和跨浏覽器的jQuery文字動畫插件，希望大家會喜歡。

Morphext是一款簡單、高性能和跨浏覽器的jQuery文字動畫插件。該文字動畫jQuery插件基於Animate.css。你可以設置使用多個不同的句子，Morphext會以你指定的CSS3動畫方式輪流顯示它們。

使用方法

首先要在頁面中引入jQuery文件和 Animate.css 文件以及 morphext.min.js和morphext.css文件。

將你想要動畫的文字句子封裝到一個元素中，並且用逗號隔開每一個句子。

代碼：I am a So Simple, Very Doge, Much Wow, Such Cool Text Rotator

然後可以在元素上調用Morphext()方法來啟用插件：

代碼：$("#js-rotating").Morphext();

可用參數

animation：類型：string，CSS動畫的類型，可以是 Animate.css 中任何一種可用的動畫類型。默認值：bounceIn。

separator：類型：string，用於分割句子字符串的符號。可以改變這個符號，例如使用"|"： So Simple | Very Doge | Much Wow | Such Cool。默認值：,

speed：類型：int，文字動畫的時間間隔，單位毫秒，默認值2000。

代碼：

$("#js-rotating").Morphext({

animation: "fadeIn", // Overrides default "bounceIn"

separator: "|", // Overrides default ","

speed: 3000 // Overrides default 2000

});

該文字動畫插件在很大程度上依賴於Animate.css來制作兩個句子之間的平滑高質量的過渡動畫。默認的動畫速度可以通過CSS來修改：

代碼：

#yourElement, .yourClass {

/* Overrides Animate.css 1s duration */

-vendor-animation-duration: 3s;

}

一些問題

Animate.css的一些動畫效果如"up"或"down"可能會超出窗口，這不是一個bug，解決的方法是在其父元素中使用overflow: hidden;。

插件中需要使用js來添加或移除Animate.css的class來執行相應的動畫效果，如果浏覽器不支持js，那麼將看不到任何效果。

Animate.css依賴於CSS3 animations和transformations。如果浏覽器不支持CSS3，該插件仍然會進行句子轉換，但是沒有動畫效果，插件中沒有提供回退的方法，如果你需要回退，可以使用Modernizr來編寫回退的方法。

以上就是我們為大家准備的jQuery文字動畫插件的相關內容，希望對大家可以有所幫助。