スクロールで画像をスプリットするアニメーションを作成する方法

2021年9月7日JavaScript

スクロールで画像をスプリットするアニメーションを作成する方法を紹介します。

デモ

See the Pen
画像スプリットアニメーション by Sosak (@Sosak2021)
on CodePen.

HTML

    <section class="split-image-section">
      <div class="split-image-side" id="side1"></div>
      <div class="split-image-side" id="side2"></div>
    </section>

SCSS

.split-image {
  &-section {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
  }
  &-side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://source.unsplash.com/random);
    background-repeat: no-repeat;
    background-size: cover;
    &#side1 {
      clip-path: polygon(0% 0%, 44% 0%, 58% 6%, 29% 15%, 59% 21%, 21% 34%, 61% 43%, 37% 53%, 59% 72%, 25% 70%, 56% 76%, 34% 81%, 51% 83%, 26% 91%, 71% 97%, 40% 97%, 55% 100%, 0 100%, 0 0);

    }
    &#side2 { //逆にしたものを作成する
      clip-path: polygon(0% 0%, 44% 0%, 58% 6%, 29% 15%, 59% 21%, 21% 34%, 61% 43%, 37% 53%, 59% 72%, 25% 70%, 56% 76%, 34% 81%, 51% 83%, 26% 91%, 71% 97%, 40% 97%, 55% 100%, 100% 100%, 100% 0%);
    }
  }
}

clip-pathを作成する際は、clippyというサイトを利用します。
custom poligonというフリーハンドの形が選択できるので、それを使って作成します。
side1には、それを利用し、side2には、左端の2点を右端に変更するだけにします。
そして、この2つをスクロールで動くように設定します。

JavaScript

const side1 = document.querySelector('#side1');
const side2 = document.querySelector('#side2');
window.addEventListener('scroll', () => {
    // -の値にすることでleftの値が-になるので左に動く
    side1.style.left = -window.pageYOffset+'px';
    side2.style.left = window.pageYOffset+'px';
})

scrollで動かすには、pageYOffsetの値を取得して、それとleftの値を紐付けることで、画像をスプリットすることができます。
左の画像にはマイナスのleftになるようにpageYOffsetにマイナスをつけます。
右は逆にプラスになるようにします。