Dawnテーマを使用したShopifyの独自作成ページで、画像にフェードインやポップアップなどのアニメーション効果を追加したい相談。質問者はHTML/CSSの初心者で、PageFlyのようなLPテンプレートではなく独自ページでの実装を希望。
提案された解決策:
現状:
質問者は自力での実装が難しいと判断し、パートナーへの依頼を含めて検討中。複数の参考リンクや情報を元に試行錯誤する意向を示している。初心者には技術的ハードルが高い案件として、専門家への依頼が推奨されている。
いつもお世話になっております。
Dawnテーマを使用しております。
【オンラインストア＞ページ】
こちらで作成したページについて、「画像」にフェードインやポップアップ表示など、「アニメーション」を加えたいと考えております。
https://b-risk.jp/blog/2021/01/anim-reference/
↑こちらのページのようなアニメーションをイメージしております。
実は、html,cssなど初心者なのですが、shopify独自ページの画像に、こういったアニメーションを加えるのは、
初心者には難しいでしょうか？？
LP作成の「PageFly」というアプリを入れてみたのですが、今回は作りたいイメージのテンプレートがなく…
独自作成ページを活用したく、悩んでおります。。。
もし、編集箇所など分かる方いらっしゃいましたらご教示いただけますと幸いです。
お忙しい中お手数ですが、ご確認よろしくお願いいたします。
トリガーとなるアクションが不明のためなんとも言えませんが、HTMLとCSS以外にもJavascriptの知識が必要なので、例えば以下あたりの内容を参照して自力対応ができないのであれば実現は難しいと思います。
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
https://www.mitsue.co.jp/knowledge/blog/frontend/201803/28_1056.html
https://ics.media/entry/14973/
作り方によってはliquidの知識も必要です。
他方、スクロールをトリガーとしたスライドインなどを機能として実装しているテーマもあったと思いますので、テーマストアでテーマを探されることも検討できるかと思います。
以上ですが、自力解決が難しい場合はエキスパートやパートナーに依頼されることをお勧めします。
JavaScriptやliquidを学ぶことは有益だと思いますので、色々な情報を参照して試作を繰り返していただくこともお勧めではあります。
アニメGIFを使えば似たようなことができます。
アニメGIFが作れるソフトが必要です。
スマホアプリでも作れるソフトはあります。
お忙しい中、詳細のご連絡ありがとうございます。
自分の知識を高めていきながら、パートナーへの依頼も検討して参ります。
ご対応ありがとうございました。
ご返信ありがとうございます。
アニメGIF、スマホアプリについて確認してみます。
ご対応ありがとうございました。