BLOG

テキストにアニメーションエフェクトをつけられるjQueryプラグイン「LetterFx jQuery」

PUBLISHED AT 02/01/2015 / IN CATEGORY web

letterfx-master

Kurokawa Design Worksのサイトを作っているときに、時間がなかったもので、簡単にかっこいエフェクトをつけられるjQueryプラグイン探していたところ「LetterFx jQuery」というのを見つけたので紹介したいと思います。

 

これがなかなか優れものでして、必要なファイルを読み込んで、エフェクトをかけたい箇所のidなりclassなりを指定してあげるだけでプレーンテキストにカッコいいエフェクトをつけられるやつなんです。

 

 

エフェクトの種類も

・spinfade

・grow

・smear

・fall

・swirl

・wave

・fly-top

・fly-bottom

・fly-left fly-right

 

9種類あり組み合わせたりする事も出来るみたいです。

とりあえずflytopでサンプルを作ってみました。

 

サンプル

 

使い方は、まずGitHubからファイルをダウンロードします。

必要なファイルは3つ

・jquery-letterfx.min.css

・tuxsudo.min.js

・jquery-letterfx.min.js

 

jQueryの本体もかならず読み込んでくださいね。

あとは下記のようにjQueryを書くだけ。

 


<link rel="stylesheet" type="text/css" href="js/letterfx-master/jquery-letterfx.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/letterfx-master/tuxsudo.min.js"></script>
<script type="text/javascript" src="js/letterfx-master/jquery-letterfx.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(window).load(function(){
    		$("h1").letterfx({"fx":"fly-top","backwards":false,"timing":100,"fx_duration":"1000ms","letter_end":"restore","element_end":"restore"});
    		$("p").letterfx({"fx":"fly-top","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"restore"});
		});
	})
</script>
<title>LetterFx jQuery</title>
</head>
<body>

<hgroup>
	<h1>LetterFx jQuery</h1>
	<p>hogehogehogehogehogehogehoge</p>
</hgroup>

 

しかもオプションはデヴェロッパーサイトで、エフェクトをプレビューしながら細かい設定をしてソースを生成してくれるジェネレーターもあるので是非使ってみてください。

 

letterfx-master_experiment

http://tuxsudo.com/code/project/letterfx