パララックス

パララックス効果のデモです。 全てのデモは rola.css を使っています。

Image parallax and mask

grid で header と 画像を重ねて配置し、 position: sticky を活用して画像の translate をずらすことでパララックス効果を表現したデモです。 画像がビューポート内に収まったら、マスクが translate の z軸が 0 になるスクラブも実装しています。

HTML

index.html

<div class="stack">
  <header class="header">
    <hgroup class="title-group">
      <h1 class="title">Rola Demo</h1>
      <p class="subtitle">– Image parallax –</p>
    </hgroup>
  </header>
  <figure class="sticky" data-rola-trigger>
    <img
      src="mountain.webp"
      class="sticky-image"
      data-rola-effect="translate"
      width="2000"
      height="1308"
      alt="夕暮れ時、白い大きな岩の横から見渡す山々。遠くに日が沈もうとしている。"
      decoding="async"
      loading="lazy"
    />
  </figure>
  <div class="mask" data-rola-trigger data-rola-scrub-start="top -10%">
    <img src="mask.svg" class="mask-image" data-rola-effect="translate" width="1200" height="675" alt="" decoding="async" loading="lazy" />
  </div>
</div>

CSS

style.css

.stack {
  display: block grid;
  grid-template:
    "stack" 100vb
    "mask" 200vb / 1fr;
  align-items: start;
}

.header {
  grid-area: stack;
  background-color: light-dark(white, #15191b);
}

.sticky {
  grid-area: stack;
  position: sticky;
  inset-block-start: 0;
  z-index: -1;
  block-size: 100vb;
}

.sticky-image {
  --rola-effect-y-start: 300px;
  --rola-effect-y-end: 0px;

  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.mask {
  grid-area: mask;
  position: sticky;
  z-index: 1;
  inset-block-start: 0;
  block-size: 100vb;
  overflow: hidden;
  perspective: 1000px;
}

.mask-image {
  --rola-effect-z-start: 1000px;
  --rola-effect-z-end: 0px;

  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

JavaScript

main.js

new Rola("[data-rola-trigger]", {
  scrub: true
});