WEBのjQueryについて。

質問

前回「例えばホロライブのホームページにアクセスする際、https://hololive.hololivepro.com/　一番最初にホロライブのロゴが文字とともに表示、フェードアウトしていきます。それらはどうやっているのでしょうか。ソースコードを確認してもそれらしきものがないのでお願いいます。」と言う質問をさせていただき、jQueryを使用していることがわかりました。感謝します。そして追加で質問です。jQueryを使用して、どうやって画像出力をしているのでしょうか。ソースコードを見ても画像urlらしきものはなかったので教えてもらえれば幸いです。（▶hololiveみたいなロゴ表示）

回答No.2

AsarKingChang

JQを使ってる場合多くは、動的なエレメント操作で動いていることが多く。
キーとなる、ID <div id=aaaa>などの"aaaa"の部分。。
これを書くプラグインの初期化の位置として与えると、
JQで、そのaaaa（JQでID=aaaaは#aaaaと書く）
に対して、必要要素を追加して、後は演出。
フェードだったりワイプだったり、ムーブその他。。
を動かすという感じで、HTML側のソースには可能な限り
何も書かないのが、普通です。
→そうすることで、プラグインを変えた時、
　必要なものをプラグインが自分で追加するので、
　HTMLへの追加が最小限となり、コストダウンするって考えがあるので。

基本JavaScriptの延長なので、同じ事をJQなしでもできますので、
興味があれば、やってみてもいいかもです！。

という事で回答というか、今回の議題で大事なのが、、ここでしょうか。
「ソースコードを確認してもそれらしきものがないのでお願いいます。」
HTMLではなく、JS側のソースコードにあるのです！。

回答No.1

t_ohta

1557行目からのJavaScript内で行われています。
$('body').append('<div id="js_fade2"></div>');
と言う処理で<div>を追加しており、このidに対してCSSで背景画像としてロゴを割り当てています。

JavaScriptで処理された結果は通常のソースを見るだけでは判りませんので、開発者ツールとかデベロッパーツールと呼ばれるブラウザの機能を使って、JavaScriptを使って生成された結果も見ないといけません。