@web_tomoyaposted at 2022-08-03

fullPage.jsのカスタマイズについて

Q&A

固定イメージ（ロゴ）を任意のページで画像を切り替えたいです。

現在fullPage.jsを使用してページを制作しています。
画面左上にfixedでロゴを表示しています。
任意のページにスクロールしたら画面を切り替えたいと思っています。
fullPage.jsでこのようなことは可能でしょうか？
解決方法を教えて下さい。

ページごと表示が切り替わらない。

scrollTop() メソッドを使用して情報を取得しようとしましたが、fullPage.jsに
このメソッドは使えずどうしていいかわかりません。

1Answer

afterLoadなどで現在のインデックスによってロゴを変える処理を組み込んで実装できないでしょうか？

こちらのサイトのサンプルを流用してafterLoadを組み込んでみました。
ページによってconsoleにログが出力されることが確認できました。

See the Pen fullpage01 by yotty (@yotty) on CodePen.

0Like

@web_tomoya
Questioner
回答ありがとうございます！
早速試させていただきまして、任意のページにきたらlogに出力するところまでは行ったのですが、その後どんなコードで画像を変更させるかわかりません。
addClassとかでクラスを追加して画像を切り替えるかんじですかね？
そのコードの書き方がわからないので、教えていただけたら嬉しいです。
@YottyPG
画像はimgタグを利用して表示していますでしょうか？

「imgタグ src 変更」などで検索すれば、参考になる情報がいろいろ出てくると思います。
@web_tomoya
Questioner
お返事ありがとうございます。
background-imageの切り替えでなんとか実装できました。
お力添えいただき本当に助かりました！ありがとうございました！
imgタグのsrc変更もググって調べます！
@YottyPG
解決したようでよかったです！