スクロールでメインビジュアルを左右に分割する方法

はじめに
完成イメージ
実装手順
参考：CSSのみでスクロール量に応じてアニメーションする方法
さいごに

はじめに

以下の内容をスキンで実現します。

【SWELL】動画を2つに分割するエフェクト｜かんた🌊SWELLマニア

ページスクロールに応じて、メインビジュアルが左右に開くエフェクトを追加します。

この記事では、このスクロールエフェクトを実装する手順について説明します。

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

add_action('cocoon_part_before__tmp/appeal', function () {
  if (
    get_theme_mod('hvn_header_setting', 'none') === 'none' ||
    !is_front_top_page() ||
    is_singular_page_type_content_only()
  ) {
    return;
  }

  ?>
  <div class="hvn-door-wrap">
    <div class="hvn-door-l"></div>
    <div class="hvn-door-r"></div>
  </div>
  <script>
  jQuery(function ($) {
    $(window).scroll(function () {
      var x = window.pageYOffset;
      x = Math.max(x, 0);
      $('.hvn-door-l').css('left', x * -2 + 'px');
      $('.hvn-door-r').css('left', x * 2 + 'px');
    });
  });
  </script>
  <?php
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.hvn-door-wrap {
  height: var(--height);
  left: 0;
  overflow: clip;
  position: absolute;
  top: var(--ah);
  width: 100%;
}

.hvn-door-l,
.hvn-door-r {
  background-image: url("画像URL");
  background-position: center;
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.hvn-door-l {
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

.hvn-door-r {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

参考：CSSのみでスクロール量に応じてアニメーションする方法

CSSのanimation-timelineを使用すると、JavaScriptなしでスクロール量を表示できます。
これを用いて実装します。

トップへ戻るボタンにスクロール量を表示する方法

「トップへ戻るボタンにスクロール量を表示する方法」を解説。Cocoon設定とCSS・JavaScriptを使ってスクロール量を表示する方法に加え、SVGで円形に表示する方法や、animation-timelineを使ってCSSのみで表示する方法、対応ブラウザの注意点を分かりやすく紹介します。