STUDIOで固定背景が切り替わる表現を実装する方法(CSSのみ)

こんにちは、福岡で活動するクリエイティブチームのFumpです！

この記事では「STUDIOでできる固定の背景が切り替わる表現を実装する方法」を紹介します。

こんなやつです↓↓↓

※注意：STUDIO純正の機能では実現ができませんので、CSSを書いています。

今回作るもの(プレビュー)：https://preview.studio.site/live/7kadlGrPa3/fixed-bg-change

スクロール連動のパララックスは現状不可能ですので、固定画像が切り替わる表現になります。
※Google Tag ManagerでJSを埋め込めば一応可能かと思いますが、今回は紹介しません。

実装方法の解説

レイヤーの紹介

以下のように組みます。

スタイリングを当てたい画像の箇所にidを振っています。(STUDIOではclassが付与できないので)※2023.3月時点

タグはsectionとしていますが、状況に応じて適切なタグを使用ください。

画像の親要素には高さをつけてあげます

画像ブロックは後ほど絶対配置(position: absolute;)にして、実際の画像(擬似要素)は固定(position: fixed;)にスタイリングし、その際に高さがなくなってしまうので、親要素に高さをつけます。

サンプルでは100vhにしていますが、お好みで変更してみてください。

画像には幅・高さ100%をつける

画像はimgの方ではなく、Boxを使用し、背景の設定はcoverにしています。

2つ目以降のセクションも同じように設定しますが、複数同じ名前のidを付与することはできないので、#parallax-xx-数字としています。

CSSを埋め込む

STUDIOには埋め込みコードのブロックがありますので、それをスタイリングに使用します。
※スクリプトは埋め込み不可(2023年3月時点)

CSSは以下

<style>
#parallax-bg-1,
#parallax-bg-2 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

#parallax-bg-1::before,
#parallax-bg-2::before {
  content: "";
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>

clip-pathについて

clip-path - CSS: カスケーディングスタイルシート | MDN

これで可視範囲の背景がスクロールで切り替わるよう表現になります。

---

応用①：比率を保ったままレスポンシブする

画像の親要素にidを付与し、heightをvwで指定してあげます。

3つ目のsectionを追加して、画像と画像の親要素それぞれにidを付与してあげます。

CSSはこちら

<style>
/* 追記部分 */
#parallax-wrapper-3 {
  height: 58.59375vw;
}

#parallax-bg-1,
#parallax-bg-2,
/* 追記部分 */
#parallax-bg-3 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

#parallax-bg-1::before,
#parallax-bg-2::before,
#parallax-bg-3::before {
  content: "";
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>

「アスペクト比の高さ / アスペクト比の幅 × 100の値」を親要素のheightにvwでつけます。

上記の場合は、横長の1280 : 750の比率にしたかったので、750 / 1280 * 100 = 58.59375

この値にvwをつけて#parallax-wrapper-3のheightに設定しています。

すると、幅が伸び縮みした時にアスペクト比が保たれたままになります。

応用②：斜めの表現をしてみる

clip-pathを編集すると斜めや波の表現などが可能になります。
同じく4つ目のsectionを追加して、画像と画像の親要素それぞれにidを付与してあげます。

CSSはこちら

<style>
#parallax-wrapper-3 {
  height: 58.59375vw;
}

#parallax-bg-1,
#parallax-bg-2,
#parallax-bg-3 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

/* 追記部分 */
#parallax-bg-4 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 15vw,100% 0,100% calc(100% - 15vw),0 100%);
  clip-path: polygon(0 15vw,100% 0,100% calc(100% - 15vw),0 100%);
}

#parallax-bg-1::before,
#parallax-bg-2::before,
#parallax-bg-3::before,
/* 追記部分 */
#parallax-bg-4::before {
  content: "";
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>

clip-pathのpolygonを使用すると斜めや波の表現が可能になります。

waveはジェネレーターもあるので、結構遊べると思います。(調整する必要はありますが)
https://wave.novoselski.net/

以上、STUDIOでできる固定の背景が切り替わる表現を紹介しました。

今までは、一枚しか背景に固定できなかったと思うのですが、これで背景が切り替わる表現がデザインに追加できるかと思います。

将来的にSTUDIOのアップデートで純正機能でできるようになるかもしれませんが、パララックスみたいな表現を取り入れてみたい方は試してみてください〜！

FumpチームはSTUDIOでの制作も行っております

普段はデザインからフロントエンドの実装をしておりますが、STUDIOでの制作も行っております！

STUDIO制作サービスページ

サイト制作のことでなくても、なんでもお気軽にお問い合わせからご相談ください

どうぞよろしくお願いしますー！