おーみんだよ。

おーみんだよ。

プログラミング(主にUnity)や気になるニュースについて。

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

f:id:bookreadkun:20190221071404p:plain

 

おはようございます。おーみん(@Ooooooomin_365)です。

 

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

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

 

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

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

 

 

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

 

 

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

 

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

 

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

f:id:bookreadkun:20190228072553p:plain

 

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

 

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

 

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

imasashi.net

 

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