【LetterFx】テクストに波打つような表現きるjQuery

こんにちは、ハル@haru_elpisです。

テキストを波打つようにしたり、回転させたりできる［LetterFx］の紹介です。

LetterFxの使い方

ダウンロード

GitHub - tuxsudo/letterfx: A jQuery plugin to apply animated, visual effects to letters, words or other text patterns.

A jQuery plugin to apply animated, visual effects to letters...

github.com

ダウンロードしたファイルの「jquery.min.js」・「tuxsudo.min.js」・「jquery-letterfx.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

HTML head

<link rel="stylesheet" href="./css/jquery-letterfx.min.css">
<script src="./js/jquery-letterfx.js"></script>
<script src="./js/jquery-letterfx.min.js"></script>
<script src="./js/tuxsudo.min.js"></script>

HTML body

<p class="spin">spin HELLO!</p>
<p class="fade">fade HELLO!</p>
<p class="grow">grow HELLO!</p>
<p class="smear">smear HELLO!</p>
<p class="fall">fall HELLO!</p>
<p class="swirl">swirl HELLO!</p>
<p class="wave">wave HELLO!</p>
<p class="fly-bottom">fly-bottom HELLO!</p>

JavaScript

$(function() {
  	$(".spin").letterfx({
    		"fx": "spin"
  	});
});
$(function() {
  	$(".fade").letterfx({
    		"fx": "fade"
  	});
});
$(function() {
  	$(".grow").letterfx({
    		"fx": "grow"
  	});
});
$(function() {
  	$(".smear").letterfx({
    		"fx": "smear"
  	});
});
$(function() {
  	$(".fall").letterfx({
    		"fx": "fall"
  	});
});
$(function() {
  	$(".swirl").letterfx({
    		"fx": "swirl"
  	});
});
$(function() {
  	$(".wave").letterfx({
    		"fx": "wave"
  	});
});
$(function() {
  	$(".fly-bottom").letterfx({
    		"fx": "fly-bottom"
  	});
});