Saetl.net

Simple And Easy TempLate

LetterFxの使い方

  1. 下記ページの右下 ｢Download ZIP｣ よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcssファイルを読み込ませるためのコードを記述。 
    <head>
<!--ダウンロードしたファイル-->
<link rel="stylesheet" href="css/jquery-letterfx.css">
</head>

    サンプルのcssコード（サンプルのcssは改変しています）

    /*ページ設定部分（style.cssなどで設定していれば削除する）*/
* {
 margin:0;
 padding:0;
}
html, body {
 height: 100%;
}
body {
 position: relative;
 min-width: 1000px;
 min-height: 100px;
 background-color: #fff;
 color: #333;
 font-size: 75%;
 font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
 line-height: 1;
}
a {
 color: #333;
 text-decoration: none;
}
a:hover {
 color: #ff0000;
 text-decoration: underline;
}
/*header*/
header {
 margin: -50px 0 0 -500px;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 1000px;
 height: 100px;
}
header h1 {
 text-align: center;
 color: #333;
 font-size: 3em;
}
/*ここまでページ設定部分*/


/*ここからLetterFXの設定*/
.letterfx-container {
}
.letterfx {
 display:inline-block;
 margin:0;
 padding:0;
 transition: all 1s;
 -ms-transition: all 1s;
 -webkit-transition: all 1s;
}
/* Spin FX */
.letterfx-spin-before {
 transform:rotate(3600deg);
 -ms-transform:rotate(3600deg);
 -webkit-transform:rotate(3600deg);
}
.letterfx-spin-after {
 transform:none;
}
/* Fade FX */
.letterfx-fade-before {
 opacity: 0;
}
/* Grow FX */
.letterfx-grow-before {
 transform:scale(0, 0);
 -ms-transform:scale(0, 0);
 -webkit-transform:scale(0, 0);
}
.letterfx-grow-after {
 transform:none;
}
/* Smear FX */
.letterfx-smear-before {
 color: transparent;
 text-shadow:-1px -1px 25px transparent;
}
.letterfx-smear-after {
 color:inherit;
 text-shadow:0 0 #333;
}
/* Fall FX */
.letterfx-fall-before {
 visibility: hidden;
 transform:scale(3, 3);
 -ms-transform:scale(3, 3);
 -webkit-transform:scale(3, 3);
}
.letterfx-fall-after {
 transform:scale(1, 1);
 -ms-transform:scale(1, 1);
 -webkit-transform:scale(1, 1);
 text-shadow:0;
}
/* Swirl FX */
.letterfx-swirl-before {
 visibility: hidden;
 transform:scale(3, 3) rotate(3600deg);
 -ms-transform:scale(3, 3) rotate(3600deg);
 -webkit-transform:scale(3, 3) rotate(3600deg);
}
.letterfx-swirl-after {
 transform:none;
 text-shadow:0;
}
/* Wave FX */
.letterfx-wave-container .letterfx {
 position:relative;
}
.letterfx-wave-before {
 bottom:0;
}
.letterfx-wave-after {
 bottom:15px;
}
/* FLY FX */
.letterfx-fly-left-container .letterfx, .letterfx-fly-right-container .letterfx, .letterfx-fly-top-container .letterfx, .letterfx-fly-bottom-container .letterfx {
 position:relative;
}
.letterfx-fly-left-before {
 left:-50em;
}
.letterfx-fly-left-after {
 left:0;
}
.letterfx-fly-right-before {
 right:-50em;
}
.letterfx-fly-right-after {
 right:0;
}
.letterfx-fly-top-before {
 top:-20em;
}
.letterfx-fly-top-after {
 top:0;
}
.letterfx-fly-bottom-before {
 bottom:-20em;
}
.letterfx-fly-bottom-after {
 bottom:0;
}
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。 
    <!--googleのCDN（ネットワーク経由でコンテンツを提供するサービス）よりjqueryをロード-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--ダウンロードしたファイル-->
<script src="js/tuxsudo.min.js"></script>
<script src="js/jquery-letterfx.min.js"></script>
<!--javascript追記（オプション）-->
$(function() {
 $(".tagline").letterfx({"fx":"fall","words":true,"timing":200});
// $(".tagline").letterfx({"fx":"swirl"});
// $(".tagline").letterfx({"fx":"grow"});
// $(".tagline").letterfx({"fx":"wave","letter_end":"rewind","fx_duration":"300ms"});
// $(".tagline").letterfx({"fx":"smear","letter_end":"rewind"});
// $(".tagline").letterfx({"fx":"spin fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"restore"});
//$(".tagline").letterfx({"fx":"fly-right fly-bottom spin"});
// $(".tagline").letterfx({"fx":"fly-right fly-bottom spin","backwards":true,"letter_end":"stay"});
</script>
</body>
    ・<body></body>内にコードを記述。 
    <header>
  <h1 class="tagline">LetterFX LetterFX LetterFX LetterFX>/h1>
</header>

    サンプルのhtmlコード

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/jquery-letterfx.css">
</head>
<body>
<header>
  <h1 class="tagline">LetterFX LetterFX LetterFX LetterFX</h1>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/tuxsudo.min.js"></script>
<script src="js/jquery-letterfx.min.js"></script>
<script>
$(function() {
 $(".tagline").letterfx({"fx":"fall","words":true,"timing":200});
// $(".tagline").letterfx({"fx":"swirl"});
// $(".tagline").letterfx({"fx":"grow"});
// $(".tagline").letterfx({"fx":"wave","letter_end":"rewind","fx_duration":"300ms"});
// $(".tagline").letterfx({"fx":"smear","letter_end":"rewind"});
// $(".tagline").letterfx({"fx":"spin fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"restore"});
//$(".tagline").letterfx({"fx":"fly-right fly-bottom spin"});
// $(".tagline").letterfx({"fx":"fly-right fly-bottom spin","backwards":true,"letter_end":"stay"});
});
</script>
</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル