【CSS】スクロールに合わせて、イマーシブ体験を提供する

はじめに

最近のバスワードとして、イマーシブというものがあります。
イマーシブは、没入させる や 夢中にさせる と言った意味のある言葉です。

クリエイティビティの高いwebサイトでは、イマーシブ体験を提供するためにスクロールに合わせて、写真の中に入るみたいな体験もあったりします。

この記事では、イマーシブ体験を提供するためのヒントとなるように CSSだけで、スクロールに合わせてアニメーションする方法を紹介します。

作るもの

今回作るものはこちらです！↓↓↓↓
スクロールすると円が広がり、画像が画面いっぱいになります。
また、イマーシブ体験を提供するために画像を少し大きくしております。

See the Pen Screen width / height (CSS) by でぐぅー | Qiita (@sp_degu) on CodePen.

作り方

実装方針

スクロールに合わせて、イマーシブ体験を提供するためには、このように実装しています。

1. <div> の background に画像を設定する
2. clip-path で <div> を円形にカットする
3. スクロールアニメーションさせる
4. <div> の position プロパティを stickyに設定する

1. <div> の background に画像を設定する

sample.html

<div class="img" />

sample.css

.img {
  background: no-repeat url("https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c04b6fd0-c089-d18a-9c1d-bd2699c7332f.png");
  background-position: center;
  height: 100vh;
  width: 100vw;

  background-size: 100%, auto, cover;
}

2. clip-path で <div> を円形にカットする

sample.css

.img {
  background: no-repeat url("https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c04b6fd0-c089-d18a-9c1d-bd2699c7332f.png");
  background-position: center;
  height: 100vh;
  width: 100vw;

  /* アニメーションさせる要素 */
  background-size: 100%, auto, cover;
  clip-path: circle(20%);
}

3. スクロールアニメーションさせる

スクロールアニメーション↓こちらの記事を参考にしてください！

sample.css

@keyframes scroll-anim {
  from {
    clip-path: circle(20%);
    background-size: 100%, auto, cover;
  }
  to {
    clip-path: circle(100%);
    background-size: 115%, auto, cover;
  }
}

.img {
  animation: scroll-anim linear;
  animation-timeline: scroll();
  background: no-repeat url("https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c04b6fd0-c089-d18a-9c1d-bd2699c7332f.png");
  background-position: center;
  height: 100vh;
  width: 100vw;
}

4. <div> の position プロパティを stickyに設定する

sample.css

@keyframes scroll-anim {
  from {
    clip-path: circle(20%);
    background-size: 100%, auto, cover;
  }
  to {
    clip-path: circle(100%);
    background-size: 115%, auto, cover;
  }
}

.img {
  animation: scroll-anim linear;
  animation-timeline: scroll();
  background: no-repeat url("https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c04b6fd0-c089-d18a-9c1d-bd2699c7332f.png");
  background-position: center;
  height: 100vh;
  position: sticky;
  top: 0;
  width: 100vw;
}

まとめ

イマーシブ体験を提供するためのヒントとなるように CSSだけで、スクロールに合わせてアニメーションする方法を紹介しました。

この記事を参考に、イマーシブ体験を作成しみてください！