<p class="spin">テキストがspinします テキストがspinします</p>
<p class="fade">テキストがfadeします テキストがfadeします</p>
<p class="grow">テキストがgrowします テキストがgrowします</p>
<p class="smear">テキストがsmearします テキストがsmearします</p>
<p class="fall">テキストがfallします テキストがfallします</p>
<p class="swirl">テキストがswirlします テキストがswirlしま</p>
<p class="wave">テキストがwaveします テキストがwaveします</p>
<p class="fly-bottom">テキストがfly-bottomします テキストがfly-bottomします</p>
$(function() {
  $(".spin").letterfx({
    "fx": "spin"
  });
  $(".fade").letterfx({
    "fx": "fade",
    "backwards": false,
    "timing": 100,
    "fx_duration": "350ms",
    "letter_end": "restore",
    "element_end": "restore"
  });
  $(".grow").letterfx({
    "fx": "grow",
    "backwards": false,
    "timing": 50,
    "fx_duration": "350ms",
    "letter_end": "restore",
    "element_end": "restore"
  });
  $(".smear").letterfx({
    "fx": "smear",
    "backwards": false,
    "timing": 50,
    "fx_duration": "350ms",
    "letter_end": "restore",
    "element_end": "restore"
  });
  $(".fall").letterfx({
    "fx": "fall",
    "backwards": false,
    "timing": 50,
    "fx_duration": "350ms",
    "letter_end": "restore",
    "element_end": "restore"
  });
  $(".swirl").letterfx({
    "fx": "swirl",
    "backwards": false,
    "timing": 50,
    "fx_duration": "350ms",
    "letter_end": "restore",
    "element_end": "restore"
  });
  $(".wave").letterfx({
    "fx": "wave",
    "backwards": false,
    "timing": 50,
    "fx_duration": "350ms",
    "letter_end": "rewind",
    "element_end": "restore"
  });
  $(".fly-bottom").letterfx({
    "fx": "fly-bottom",
    "backwards": false,
    "timing": 50,
    "fx_duration": "350ms",
    "letter_end": "restore",
    "element_end": "restore"
  });
});

External CSS

  1. https://gimmicklog.com/demo/letterfx/jquery-letterfx.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://gimmicklog.com/demo/letterfx/tuxsudo.min.js
  3. https://gimmicklog.com/demo/letterfx/jquery-letterfx.min.js