[Shopify]画像を重ねてスクロールすると動画風にアニメーション表示できるセクション・メインビジュアルに使える（メタフィールド対応） #114 #temp-u

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

メインビジュアルなんかに使えるセクション🎵アニメーションとヘッダーエリアの２カラム。片方のカラムは画像を重ねてスクロールするとしたからふんわり順番に表示されるアニメーション。もう片方はテキストか画像で見出しなどを表示するエリアでアニメーションなし。

アニメーションエリアの画像は３枚まで挿入できます。背景「透過」にした画像を挿入するとGIF風になる！

LPに動きがあると印象が変わるね＾＾

ベーステーマ：Dawn
※他のテーマでも挿入できると思いますがレイアウト崩れるかもしれないのでその場合はご自身で調整してね

✔️今回のゴール

デモページ

[Shopify]画像を重ねてスクロールすると動画風にアニメーション表示できるセクション・メインビジュアルに使える（メタフィールド対応）#temp-u

🔸CMSの特徴

「セクション U-5」を選択

・アニメーションエリアの位置
　→SPではどちらの場合もここが先に表示されます。
・テキストor画像エリア
　→画像優先。画像が設定されていると画像の方が反映される。テキストにしたい場合は画像を削除してください。
・テキストの配置（左右・中央）
・アニメーション用の画像は３枚まで重ねられます
・ボーダーカラー
・余白

※画像は正方形で透過した画像を重ねると上手くアニメーションができるよ＾＾

サンプル画像

５００x５００px

５００x５００px

５００x５００px

【ご注意】
※返金&サポート&コメント返信はしておりません。
※現時点の最新のDawnテーマをベースに作成してます。
※コードのみのご紹介で解説などはしておりません。
※2023.12時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。（メンバーシップでコメント頂いた場合は修正します）

✔️設定手順

Step１　新規セクション追加

1️⃣管理画面＞コード編集＞セクション＞新規追加

ファイル名はなんでもOK
→私はsection-temp-u-05で作成しました