プログラミング未経験者の備忘録

ノンプログラマーが社内SEになったのでイチからプログラミングを勉強し始めました!

ローディングGIFを自作して設置した

サイトにアクセスしたときに処理待ちの間にアニメーションを流す処理「ローディングアニメーションを追加しました。

 

時々サイト読み込み中にこんなのが出るやつです。

f:id:su3se:20190522005619g:plain

 

自作したローディングアニメーションは簡単なGIF画像です。

f:id:su3se:20190522005644g:plain

 

参考にしたサイト

こちらのサイトの最下部にサンプルソースがあったのでこれを参考にしました。

f:id:su3se:20190522011033p:plain

参照:http://ysklog.net/jquery/2120.html

 

GIFアニメを作った後でCSSjavaScriptを別ファイルで作り呼び出す形で設置しました。

今回作ってるのがGoogleのパロディサイト的なトップページデザインでローディングアニメが終わってからフワッと同じ位置にロゴを出したかったのでCSSの設定で苦労しました。

ページにスタイルとスクリプトを一括で書いてしまうなら簡単で良いですが、前回「header」や「footer」を別けてしまったのもあってローディングアニメーションとロゴ画像の位置をぴったり合わせることが出来なかったので今後の課題です。

きっちりCSS(スタイルシート)を入れてあげれば揃うんだろうな・・・

 

出来上がったのがこちらです。

f:id:su3se:20190522011150g:plain

軽いページの移換してスクショを取ったのであんまりわかりずらいですが上下が若干(数px)ずれてしまってます。

こういう仕様です。と言ってしまえば通りそうですけど意図に反してズレてるのでもろ私のスキル不足です(笑)