質問: ### 前提・実現したいこと wordpressでサイト制作をしています。 topページの背景にフルスクリーンで他の動作に支障がないように、エフェクトの掛かったスライドショーを取り入れたいと考えています。 ### 発生している問題・エラーメッセージ 今は一応、topページで画面全体の背景にjqueryPluginのvegas.js([http://vegas.jaysalvat.com/])を用いて5枚の画像が切り替わるフルスクリーンのスライドショーを実装していて、動作はしているのですが他の動作(下にスクロールするとコンテンツがフェードインしてくるなど)がカクカクになってしまったり、PCのファンが異常にうるさくなってしまったりしてしいます。 vegasの動き自体は気に入ってるのですが、他の動作に影響を与えないようにするには他の方法を考えるしかないのでしょうか?画像のサイズを小さくしたり読み込み位置を変えるなどのことはしてみましたが、あまり意味がありませんでした。 初歩的な質問になってしまい恐縮ですが、ご教授いただければ幸いです。
回答: プラグインの動作を確認してみましたが、CSSを使って画像を動かしており、つまりGPUを使った動作をさせていたるため、簡単に導入できるライブラリとしては最大限のパフォーマンスを発揮していると思います。 しかしながら、スペックの低いパソコンや、さらにパフォーマンスの悪いスマートフォンでは厳しいこともあるかもしれません。 簡単に出来る対策としては、いくつかあると思います。 ・プラグインのpreloadImageを有効にして、ロードを完了するまでアニメーションが動作しないようにする。 このオプションが具体的にどのように動作するのか分かりませんが、全てのファイル、あるいは次に表示するファイルのロードが完了していないとアニメーションしないようになっているなら、それなりに効果は見込めそうです。 ・アニメーションの動作をvideo化し、vegas.jsを使ってフルスクリーン表示する vegas.jsについて詳しくも無いのにこんな提案ばかりで申し訳ないですが、動画も扱える様子なので・・・ ・transitionDurationあるいは、animationを使っている場合はanimationDurationを長く設定する。 これはもうごまかし程度ですが、全体の動作が遅ければ遅くなっている部分も目立たなくなる可能性が。 このプラグインをあきらめた対策として、webGLを使って動かすという方法もある・・・かもしれません。 webGLを使った同じようなライブラリがあるかどうかは分からない上に私は一度しかwebGLを使ったことがないので詳しいことを言えるだけの知識がありませんが、こちらの記事では、webGLのパフォーマンスが良いと書かれています。 が、なさりたいことに比べて機能的に明らかにオーバースペックな感じもします。 いろいろ書いて見たものの、あまりお役に立ててない気もします。 申し訳ありません。 何かの参考になれば幸いです。