WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

textillate.js

f:id:mmmmofu:20161028142532p:plain

文字にエフェクトがかけらるjQueryプラグイン

Textillate.js
公式サイトではアニメーションの組み合わせを試すことができる。

デモはこちら

http://efu.sakura.ne.jp/web/textillate/

jQuery本体と、textillate.js、lettering.jsとanimate.cssを読みこんでおく


Animate.css
CSS3で様々なアニメーションを実装することができる

Lettering.js - A jQuery plugin for radical web typography.
文字にひとうひとつタグがつけられる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>textillate</title>
  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.textillate.js"></script>
  <script src="js/jquery.lettering.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <ul>
    <li>
      <p class="fidb_sfl">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </li>
    <li class="flip_sfl">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </li>
    <li class="bouns_sfl">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </li>
  </ul>
</body>
</html>
$(function() {
  $('.fidb_sfl').textillate({
    loop: true,//ループするか(falseの場合はoutは動作しない)
    minDisplayTime: 3000,//テキストが変かするまでの表示時間
    initialDelay: 0,//遅延時間
    autoStart: true,//アニメーションが自動的にスタートするか

    in: {//文字が表示される時の設定
      effect: 'fadeInDown',//アニメーションのエフェクトの名前(animate.cssと同じ)
      delayScale: 1.5,//遅延時間
      delay: 30,//文字ごとの遅延時間
      sync: false,//trueの場合
      shuffle: true//trueの場合文字がランダムで表示される
    },

    out: {//文字が非表示になる時の設定
      effect: 'fadeOutDown',//アニメーションのエフェクトの名前(animate.cssと同じ)
      delayScale: 1.5,
      delay: 40,//文字ごとの遅延時間
      sync: false,//trueの場合
      shuffle: true//trueの場合文字がランダムで表示される
    }
  });

  $('.flip_sfl').textillate({
    loop: true,//ループするか(falseの場合はoutは動作しない)
    minDisplayTime: 3000,//テキストが変かするまでの表示時間
    initialDelay: 0,//遅延時間
    autoStart: true,//アニメーションが自動的にスタートするか

    in: {//文字が表示される時の設定
      effect: 'flip',//アニメーションのエフェクトの名前(animate.cssと同じ)
      delayScale: 1.5,//遅延時間
      delay: 50,//文字ごとの遅延時間
      sync: false,//trueの場合
      shuffle: true//trueの場合文字がランダムで表示される
    },

    out: {//文字が非表示になる時の設定
      effect: 'flipOutY',//アニメーションのエフェクトの名前(animate.cssと同じ)
      delayScale: 1.5,
      delay: 50,//文字ごとの遅延時間
      sync: false,//trueの場合
      shuffle: true//trueの場合文字がランダムで表示される
    }
  });

  $('.bouns_sfl').textillate({
    loop: true,//ループするか(falseの場合はoutは動作しない)
    minDisplayTime: 3000,//テキストが変かするまでの表示時間
    initialDelay: 0,//遅延時間
    autoStart: true,//アニメーションが自動的にスタートするか

    in: {//文字が表示される時の設定
      effect: 'bounce',//アニメーションのエフェクトの名前(animate.cssと同じ)
      delayScale: 1.5,//遅延時間
      delay: 50,//文字ごとの遅延時間
      sync: false,//trueの場合
      shuffle: true//trueの場合文字がランダムで表示される
    },

    out: {//文字が非表示になる時の設定
      effect: 'bounceOut',//アニメーションのエフェクトの名前(animate.cssと同じ)
      delayScale: 1.5,
      delay: 50,//文字ごとの遅延時間
      sync: false,//trueの場合
      shuffle: true//trueの場合文字がランダムで表示される
    }
  });
});