iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
1
Modern Web

30天學習30套前端技術(2018年)系列 第 8

[十分鐘學習] Textillate.js - 絢麗文字動畫特效

example1

Textillate.js結合很多很棒的函式庫,簡單應用CSS3動畫特效

GitHub Star: 3,100
Javascripting Overall: 63%
瀏覽器: ChromeFirefoxIE8+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- Animate.css v3.5.2 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
      <!-- lettering.js v0.7.0 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
      <!-- Textillate.js v0.4.0 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>
    

《範例》

  • 淡入顯示

      <!--
      	屬性設定[註1]
      	data-in-effect: 進場效果
      -->
      <h1 class="example" data-in-effect="fadeIn">Hello World</h1>
      <script>
      	$( ".example" ).textillate();
      </script>
    
  • 多行文字分批顯示

    example2

      <h1 class="example">
      	<ul class="texts">
      		<!--
      			屬性設定[註1]
      			data-in-effect: 進場效果
      			data-out-effect: 出場效果
      			data-in-shuffle: 進場使用隨機模式
      			data-out-shuffle: 出場使用隨機模式
      		-->
      		<li data-out-effect="fadeOut" data-out-shuffle="true">Hello</li>
      		<li data-in-effect="fadeIn">World</li>
      	</ul>
      </h1>
      <script>
      	$( ".example" ).textillate();
      </script>
    

    [註1]

    屬性 描述
    data-in-effect 進場效果(列表[註2])
    data-out-effect 出場效果(列表[註3])
    data-in-shuffle 進場使用隨機模式(列表[註4])
    data-out-shuffle 出場使用隨機(列表[註4])

    [註2]

    flash bounce shake tada
    swing wobble pulse flip
    flipInX flipInY fadeIn fadeInUp
    fadeInDown fadeInLeft fadeInRight fadeInUpBig
    fadeInDownBig fadeInLeftBig fadeInRightBig bounceIn
    bounceInDown bounceInUp bounceInLeft bounceInRight
    rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
    rotateInUpRight rollIn

    [註3]

    lash bounce shake tada
    swing wobble pulse flip
    flipOutX flipOutY fadeOut fadeOutUp
    fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig
    fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceOut
    bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
    rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft
    rotateOutUpRight hinge rollOut

    [註4]

    • sequence
    • reverse
    • sync
    • shuffle

《延伸》

  1. Textillate.js
  2. jschr/textillate: A jquery plugin for CSS3 text animations.

上一篇
[十分鐘學習] typeahead.js - 文字欄位顯示建議列表
下一篇
[十分鐘學習] Chart.js - 圖表繪製
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言