ベーシック

rola.css を使ったベーシックなデモです。

インビュー

Fade

HTML

index.html

<p class="text-large" data-rola-trigger data-rola-transition="fade">
  Rola is a scroll manager.
</p>

CSS

style.css

.text-large {
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.125rem, 0.5rem + 3.125vw, 2rem);
  font-weight: 700;
}

JavaScript

main.js

new Rola("[data-rola-trigger]", {
  rootMargin: "0% 0% -30%"
});

Blur

HTML

index.html

<p class="text-large" data-rola-trigger data-rola-transition="blur">
  Rola is a scroll manager.
</p>

CSS

style.css

.text-large {
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.125rem, 0.5rem + 3.125vw, 2rem);
  font-weight: 700;
}

JavaScript

main.js

new Rola("[data-rola-trigger]", {
  rootMargin: "0% 0% -30%"
});

Slide

HTML

index.html

<p class="text-large" data-rola-trigger data-rola-transition="slide">
  Rola is a scroll manager.
</p>

CSS

style.css

.text-large {
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.125rem, 0.5rem + 3.125vw, 2rem);
  font-weight: 700;
}

JavaScript

main.js

new Rola("[data-rola-trigger]", {
  rootMargin: "0% 0% -30%"
});

Scale

HTML

index.html

<p class="text-large popup" data-rola-trigger data-rola-transition="scale">
  Rola is a scroll manager.
</p>

CSS

style.css

.popup {
  --rola-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.text-large {
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.125rem, 0.5rem + 3.125vw, 2rem);
  font-weight: 700;
}

JavaScript

main.js

new Rola("[data-rola-trigger]", {
  rootMargin: "0% 0% -30%"
});

スクラブ

Fade

HTML

index.html

<p class="text-large"
  data-rola-trigger
  data-rola-effect="fade"
  data-rola-scrub-start="bottom bottom"
  data-rola-scrub-end="center center"
>
  Rola is a scroll manager.
</p>

CSS

style.css

.text-large {
  inline-size: fit-content;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.125rem, 0.5rem + 3.125vw, 2rem);
  font-weight: 700;
}

JavaScript

main.js

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

Scale

HTML

index.html

<p class="text-large"
  data-rola-trigger
  data-rola-effect="scale"
  data-rola-scrub-start="bottom bottom"
  data-rola-scrub-end="center center"
>
  Rola is a scroll manager.
</p>

CSS

style.css

.text-large {
  inline-size: fit-content;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.125rem, 0.5rem + 3.125vw, 2rem);
  font-weight: 700;
}

JavaScript

main.js

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

Text Clip

HTML

index.html

<p class="text-large"
  data-rola-trigger
  data-rola-effect="text-clip"
  data-rola-scrub-start="bottom bottom"
  data-rola-scrub-end="center center"
>
  Rola is a scroll manager.
</p>

CSS

style.css

.text-large {
  inline-size: fit-content;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.125rem, 0.5rem + 3.125vw, 2rem);
  font-weight: 700;
}

JavaScript

main.js

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

Image Position

HTML

index.html

<figure class="cover" data-rola-trigger>
  <img src="pizza.webp" data-rola-effect="image-position" width="1384" height="924" alt="石窯から出てきたばかりの焼きたてマルゲリータ" decoding="async" loading="lazy" />
</figure>

CSS

style.css

.cover {
  block-size: 100vb;
  overflow: hidden;
}

JavaScript

main.js

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

Clip

HTML

index.html

<figure class="cover" data-rola-trigger data-rola-effect="clip" data-rola-scrub-end="top top">
  <img src="pizza.webp" class="cover-image" width="1384" height="924" alt="石窯から出てきたばかりの焼きたてマルゲリータ" decoding="async" loading="lazy" />
</figure>

CSS

style.css

.cover {
  block-size: 100vb;
  overflow: hidden;
}

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

JavaScript

main.js

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

Translate

HTML

index.html

<div class="pin-container"
   data-rola-trigger
   data-rola-scrub-start="top top"
   data-rola-scrub-end="bottom bottom"
>
  <div class="pin">
    <div class="flex" data-rola-effect="translate">
      <div class="item">
        <p>01</p>
      </div>
      <div class="item">
        <p>02</p>
      </div>
      <div class="item">
        <p>03</p>
      </div>
      <div class="item">
        <p>04</p>
      </div>
      <div class="item">
        <p>05</p>
      </div>
      <div class="item">
        <p>06</p>
      </div>
    </div>
  </div>
</div>

CSS

style.css

.pin-container {
  min-block-size: 300vb;
}

.pin {
  --offset: 10vi;

  position: sticky;
  inset-block-start: 0;
  display: block grid;
  align-content: center;
  min-block-size: 100vb;
  padding-inline: var(--offset);
  overflow: hidden;
}

.flex {
  --rola-effect-x-start: 0%;
  --rola-effect-x-end: calc(-100% + (100vi - var(--offset) * 2));

  display: block flex;
  column-gap: 2rem;
  align-items: center;
}

.item {
  display: block grid;
  place-content: center;
  flex-shrink: 0;
  inline-size: 200px;
  aspect-ratio: 1;
  border: 1px solid;
  font-size: 1.5rem;
  font-weight: 700;
}

JavaScript

main.js

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