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, "MS Pゴシック", 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式をサーバーにアップロードして設置完了。
    サンプル