【jQuery】ウェブサイトにアニメーションを付ける。

おはようございます。おーみんです。

先日オリジナルサイトのCSS部分が完成したという記事を書きました。

【HTML&CSS】オリジナルサイトのCSSが書き終わりました！ - おーみんだよ。

そこで今回からはサイトにアニメーションを付けていきました。

以下はjQueryを用いてアニメーションを付けたトップページになります。

Day 10
Finished to write #JavaScript （#jQuery）of my top page.

I used jQuery Plug-in to make slide.（It is autoplay）

when I scroll down, make Access appear.

Next, I"ll write it of other pages.#100DaysOfCode pic.twitter.com/KydblfavUQ

— 超おーみん2@Unity民族 (@Ooooooomin_365) 2019年2月27日

ちなみにアニメーションを付ける前はこちら（HTML&CSSのみ）。

Day 6

Finished to write #css of top page.
From tommorrow, I"ll write it of other pages.

Finally, each picture of the top page will make slide by writing #jQuery .#100DaysOfCode pic.twitter.com/JeULOb8mEz

— 超おーみん2@Unity民族 (@Ooooooomin_365) 2019年2月23日

変化したのは以下の2点になります。

• 4枚の写真が1枚ずつスライドして表示されるようになった
• 地図情報がスクロールされてから表示されるようになった

スクリプトはこんな感じ。

画像のスライドに関してはslickというプラグインを利用しています。

HTMLでスライドさせたい画像にクラス名"slider"を付けてスクリプト内でautoplay（自動再生）、autoplaySpeed（スピード）、arrows（矢印）、dots（ドット表記）の設定をします。

画面をスクロールさせてから地図が出てくるようにする設定に関しては以下のサイトを参考にしました。

imasashi.net

次回は別のページにもアニメーションを付けていこうと思います。