スライドインアニメーションの動作について

RSPCT · ‎05-18-2021

お世話になっております。

ネットで色々と調べましたが、いまいち有益な情報にたどり着けませんでしたので、質問させてください。

現在有料テーマ「Fashionopolism」にてサイト制作を行なっております。

トップページの任意のセクションの画像にスライドインアニメーションを使用したいです。（スクロールしていった際にアニメーション開始するようにしたいです。）

どの方法でアニメーションさせるのがよいのか（cssアニメーションを使用するのか、jsを使用するのかなど、なるべくページ表示速度を考慮した方法ですと助かります。）、

またその際に、どのファイルを編集していけばいいのか方法を教えていただきたく、ご質問させていただきました。

ご回答お待ちしておりますので、ご協力の方よろしくお願いいたします。

Jizo_Inagaki · ‎05-28-2021

基本的には以下のようになるかと思います。

表示速度に関しては作り方次第としか言えませんが、この辺りは検索して色々出てくる速度改善の情報を参考にして判断いただく方がよいと思います。

該当のテーマは触ったことがないので具体的なことはわかりませんが、TOPページのみが対象ならindex.liquidに記載するのが簡単かもしれません。
またはtheme.liquidにifで分岐を作ってTOPページにのみ出力させる方法も検討できます。

なお、有料テーマに関しては販売元のサポートに相談されることもお勧めします。

[参考URL]

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

RSPCT · ‎05-28-2021

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

こちらのテーマはAOSというJSのプラグインを使用しており、

対応しているJSファイルを修正することで、任意のアニメーションを使用でき、速度調整もすることができました。

ご丁寧に添付資料までいただき、ありがとうございました。

コミュニティ・ブログ記事