はてなブックマーク

イマドキのWebサイトをみると、よくローディング画面が出てきてサイトが出現する演出をよく見かけます。なので、Webサイトを作るうえでは、不可欠な要素になってきています。 ですが、コーディングに慣れていないと作りたくてもどうやっていいか、わからないのではないでしょうか？僕もそうでした。プラグインを使うと楽なのですが、応用が効かなくなるので、この記事では1から作って、ローディング画面の実装をちゃんと理解することを目指しました。 実装したいページローディングエフェクト 実装したい内容は、ページが表示される前に現れるローディングのアニメーションの部分です。具体的には、下記の2つのwebページのローディングページの要素を組み合わせたイメージ http://www.a-tm.co.jp/ http://www.epoch-inc.jp/ アニメーションの手順 最上部にある赤い線が左から右へ伸びる 参考