文字を動かす、jQueryこんにちは、合同会社beReadyの奥山です。文字が順番に動いてくるのを見たことがありませんか??あれかっこいいですよねー!!今回は文字を順番に表示したり、消したりできるjQueryプラグインの「textillate.js」についてご紹介します。デモページまずはtextillate.jsのデモページをご覧ください。デモページtextillate.jsの使うための準備textillate.jsの使い方はまず3つのファイルをダウンロードするところから始まります。必要に応じて持っていない人はダウンロードしてください。textillate.jsletterring.jsanimate.cssなぜ3つも必要なのかというと、感覚的にお話しすると、lettering.jsが、文字の1つ1つに時間差でエフェクトをかけるという仕事をします。そのエフェクトの内容がanimate.cssというわけですね。animate.cssに保存されているエフェクトの内容を時間差でかけると。この一連の挙動を、textillate.jsで管理しているといった感じです。間違っていたらご指摘ください笑textillate.jsの使い方まずはダウンロードした3つのファイルを各サーバーにFTP経由でアップロードします。自分でフォルダを作って入れればいいでしょう。animate.cssはcssフォルダに入れる感じで。したら、読み込んでいきます。src="js/jquery.textillate.js"></script>と記述して、(ここは人によってどこに保存しているか異なるので少し変わります。)ファイルを読み込んでいきます。説明は省いていますがjQueryの読み込みの後にtextillate.jsとletterring.jsは読み込んでくださいね。次は実際に動かすための記述をしていきます。{$('効果をつけたいもののclass名').textillate();})</script>これを記述します。これがもっとも単純な記述の仕方ですね。実際に効果をつけたい要素を記述していきます。class="demo">デモですデモですデモです。class="demo2">デモですデモですデモです。class="demo3">デモですデモですデモです。class="demo">デモですデモですデモです。class="demo2">デモですデモですデモです。class="demo3">デモですデモですデモです。</p>これで基本形は完成しました。続いて効果をつけていきます。効果には(animate.cssのことですね)はjs要素としてつけるのか、あるいはdata要素としてつけるのか2つ種類があります。js要素での使い方js要素ではこのように記述していきます。消えていくのかを指定することができるんです。ここで注意が必要なのはoutのエフェクトをかけるときは必ずloopがtrueになっていなければなりません。loopがfalseの時はoutの効果は発動しないので注意してください。data要素での使い方data要素での使い方は動かしたい要素に直接書き込んでいきます。data要素に書き込む前に一応トリガーとしてjsも書いておく必要があるので、まずそちらを書いていきましょう。.demo2').textillate();})</script>最初に書いた基本形と同じですね笑これを書いたら直接data要素を書き込みます。data-out-shuffle="true">デモですデモですデモです。data-out-shuffle="true">デモですデモですデモです。data-out-shuffle="true">デモですデモですデモです。data-out-shuffle="true">デモですデモですデモです。</p>これで大丈夫です。書き方としてはdata-(inかoutかどちらの時でもないものは書かない)-(effectなのかdelayなのかshuffleなのか)という書き方になります。本当によく間違えるのですがdata要素ですからね??date要素ではないですよw綴りをよく確認して使ってくださいね!!ではまた。(公開されません)URL次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。2016起業・独立の前に松陰先生から6つの重要なお話があります。2016起業・独立の前に松陰先生から6つの重要なお話があります。三重県、岐阜県も対応させていただきます。他の地域の方でも電話対応、メール、ビデオ通話で対応しますし、用件によっては直接お会いします。takashi15Aug2016起業・独立の前に松陰先生から6つの重要なお話があります。2016起業・独立の前に松陰先生から6つの重要なお話があります。三重県、岐阜県も対応させていただきます。他の地域の方でも電話対応、メール、ビデオ通話で対応しますし、用件によっては直接お会いします。llc.beReady。