インターン１２日目

みなさんこんにちは！ハシバです。
本日も苦戦しながらポートフォリョサイトコーディングをしています。jQueryプラグインを導入しサイトに動きをつけているのですが、細かい調整など難しいです。ただ、うまく導入できたときはちょっと感動します。

そんなわけで、本日はjQueryついて記事を書いていきます！
初心者の方には少し難しいかもしれませんが、挑戦してみてください。

準備

jQuery公式ページからファイルをダウンロードをします。

http://jquery.com/

格納フォルダに「js」という名前のフォルダを作り、ファイルを入れます。（ダウンロードした「js」ファイルはすべてここに入れていきます。）

次に本体を設置します。HTML内に下記を記述して設置します。

<script src="js/jquery-○○○○.js" type="text/javascript"></script>

（○○の部分にはjQueryのバージョンが入ります。）

これで準備は完了！！あとはプラグインを入れるだけです！！

AOS導入

では実際に「AOS」というプラグインを導入してみます。スクロールすると画像やテキストなど選択した部分がさまざまな動きをしてくれるプラグインです。

AOSは導入も非常に簡単で、動きの種類も多いのでオススメです。日本語の解説サイトも多いのでぜひ導入してみください！

（先ほどのjQueryの本体の設置をしたのですが、AOSの場合はjQueryの本体なくても導入できます。他のプラグインはjQueryの本体を必要とする物が多いので、覚えていただければと思います。）

http://michalsnik.github.io/aos/

ダウンロード画面からファイルをダウンロードし、先ほど作った「js」フォルダにファイルをに入れます。AOS場合はCSSファイルもあるのでダウンロードして格納フォルダに入れてます。（プラグインによって「js」ファイルだけの物もあります）

aos CSSの設置　<link rel="stylesheet" href="css/aos.css">

jQueryプラグインaos　<script src="js/aos.js" type="text/javascript"></script>

jAOSのjsファイルを設置し、cssファイルを適応させます。次に実行コードを記述して設置完了です。

<script>
 AOS.init();
</script>

最後にAOSのデモページから使用したい物を選び、コードをコピーして＜div＞と</div>の間に動きを出したい画像やテキストを入れてくだざい。

<div data-aos="fade-up"><img src="imges/○○○" alt="画像" width="250" height="250" /></div>

これで動くはずです！！動きの速さやタイミングも設定できるので、いろいろ設定してみたください！

まとめ

jQueryプラグイン手軽に動きが出すことができるので非常に便利です。ただ、複雑な物やブラウザによって実装できない物もあるので初めの内は解説サイトが多いものから使用することオススメします。jQueryプラグインのまとめサイトも多くあるので、いろいろ見て導入できそうな物を選んでもらえばと思います！