軽量なサイトを実装したい | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

しろさん、こんにちは。

参考サイト、拝見しました。
こちらはCSSアニメーションで実現させていますね。

※CSSアニメーションについての詳細は、ネット上でたくさん紹介されていますので調べてみてください。

例えばメイン画像のキャッチコピーの文字は、onload時にactiveクラスを割り当て、アニメーションを開始させています。

電車や飛行機も基本的にCSSです。

人様のサイトなのでここでは内容については明記しませんが、以下のファイルを読み込んでおり、そこにトップページのアニメーションに関する内容が記載されています。

/assets/css/top/style.css
/assets/js/top/anime.js

プロの作るソースは非常に参考になりますので、このあたりを読み解いていくと勉強になると思いますよ（私もソースを読んでみましたが、参考になりました）。


アニメーションが重くなる要因は、いろいろあります。
JavaScriptでCPU処理されたアニメーションはすべらかで無いですし、GPU処理の方が優れます。また、再描画が多いと重くなります。

Chromeではそういったアニメーションに関することも検証可能です。

「chrome rendering アニメーション」
などで検索すると検証方法が出てきますので、こちらも調べてみると良いかもしれませんね。

馬場様

回答いただきありがとうございます。

CSSアニメーションを使っていたのですね
アニメはJSやPNGアニメを使っていて重くなったので、今後はCSSアニメも勉強したいと思います。

丁寧に教えていただき大変参考になりました。
お忙しいところこのような質問に答えていただきありがとうございました。