jQueryプラグインの導入と設置

K's

今回は『textillate.js』を使用する目的でダウンロードと設置をしていきます。

 公式ページ、もしくは『GitHub』からダウンロードする。

1. 『textillate.js』のGitHubに飛びます。

画像1

2. 『Code』をクリックし『Download ZIP』をクリックします。

⚠️他にもダウンロード方法はありますが、今回は『ZIP』形式のダウンロード方法でいきます。

画像2

ダウンロードが完了するとこの様な圧縮ファイルがダウンロードされていると思います。

画像3

3. 圧縮ファイルをクリックし、解凍する。

画像4

4. ファイルをクリックし、中身を確認する。

画像5

5. 必要なファイルを必要なフォルダへ移動する。

今回『textillate.js』で使用するのは『「jquery.lettering.js」、「jquery.textillate.js」、「animate.css」』の3つのファイルです。

今回、自身は『「jquery.lettering.js」、「jquery.textillate.js」』を『jsフォルダ』へ、『animate.css』を『cssフォルダ』へ移動させました。

画像6

6. ダウンロードしたファイルの読み込みを記述する。

<!-- index.html -->
<!-- <head>内に記述 -->

<head>
  <link rel="stylesheet"  href="css/animate.css">
</head>
<!-- index.html -->
<!-- <body>下部に記述 -->


  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="js/jquery.textillate.js" ></script>
  <script src="js/jquery.lettering.js" ></script>
</body>

7. 最後に

これでダウンロードと設置が完了しました。

jQueryは大変便利だと思います。

誰かの参考になれば幸いです。

この記事が気に入ったらサポートをしてみませんか？