コンテンツにスキップ
Rola

インビュー機能

data-rola-inview 属性の値（ true / false ）に応じた属性セレクタを用意することで、トリガー要素が画面内に入った際に任意のアニメーションを実行するインビューアニメーションを簡単に作成できます。

アニメーション用のCSS

インビューアニメーション用のCSSは自由に作成できます。 なお、rola.css には、あらかじめ フェード などのよく使うであろうアニメーションを用意しています。

data-rola-inview 属性の値（ true / false ）活用して、transition プロパティ や animation プロパティで任意のアニメーションを作成します。

例えば、以下のようなCSSを用意します。

style.css
.rola-transition {
  --duration: 0.6s;
  --easing: ease-out;
  --property: opacity;


  transition: var(--duration) var(--easing);
  transition-property: var(--property);
}


.rola-fade-in {
  --duration: 1s;
  --easing: ease;


  &[data-rola-inview="false"] {
    opacity: 0;
  }
  &[data-rola-inview="true"] {
    opacity: 1;
  }
}


.rola-blur-in {
  --property: opacity, filter;


  &[data-rola-inview="false"] {
    filter: blur(8px);
    opacity: 0;
  }
  &[data-rola-inview="true"] {
    filter: blur(0);
    opacity: 1;
  }
}


.rola-slide-up-in {
  --property: opacity, translate;


  &[data-rola-inview="false"] {
    translate: 0 3rem;
    opacity: 0;
  }
  &[data-rola-inview="true"] {
    translate: 0 0;
    opacity: 1;
  }
}

これで、以下のようなHTMLを準備し、Rolaをインスタンス化するとインビューアニメーションが可能です。

index.html
<p class="rola-transition rola-fade-in" data-rola-trigger>
  Rola is a scroll manager.
</p>
main.js
new Rola("[data-rola-trigger]");

ビューポートのマージン

rootMargin オプションを使えば、data-rola-inview 属性の値（ true / false ）が切り替わるタイミングをコントロールできます。初期値は 0px となっており、ビューポート内に要素が少しでも入ったら data-rola-inview 属性が true になります。

rootMargin は IntersectionObserver の rootMargin オプションと同等で CSSの margin プロパティのように設定します。

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

上記の例では、ビューポートの1番上から、下から 30% までのエリアにトリガー要素が入った時に data-rola-inview 属性が true になります。

1度だけ実行させる

once オプションを使えば、data-rola-inview 属性のfalse から true の切り替えを1度だけにすることができます。

デフォルトは false になっており、トリガー要素がビューポートに入るたびに実行されますが、true にすることで、はじめてビューポートに入った時だけ実行するようになります。

main.js
new Rola("[data-rola-trigger]", {
  once: true,
});

なお、特定のトリガー要素のみ once オプションを有効にしたい場合は、トリガー要素に data-rola-once 属性を指定します。

index.html
<!-- once を 有効化 -->
<div class="rola-fade-in" data-rola-trigger data-rola-once>...</div>
<div class="rola-fade-in" data-rola-trigge data-rola-once="true">...</div>


<!-- once を 無効化 -->
<div class="rola-fade-in" data-rola-trigger data-rola-once="false">...</div>

ターゲット要素の変更

デフォルトでは、トリガー要素に data-rola-inview 属性が付与されますが、時にはトリガー要素ではない要素をアニメーションしたい場合などもあります。その場合は トリガー要素に data-rola-target属性を使い、 data-rola-inview 属性を付与させたい要素（ターゲット要素）を CSSセレクタで指定します。

index.html
<div data-rola-trigger data-rola-target="#target">...</div>
...
<div id="target" class="rola-fade-in">...</div>

これにより、トリガー要素がビューポートに入ったら、ターゲット要素のdata-rola-inview 属性が true になります。

JavaScriptによる操作

Rola は、インスタンス作成時の第3引数にコールバック関数を持たせることができます。

コールバック関数はトリガー要素がビューポートに入るタイミングと、ビューポートから出るタイミングで実行されます。 once オプションが有効な場合には、最初にビューポートに入ったタイミングで1度だけ実行されます。

main.js
const callback = (element, isInView, options) => {
  if (isInView) {
    console.log(`トリガー要素がビューポートに入った`);
  } else {
    console.log(`トリガー要素がビューポートから出た`);
  }
};


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

これにより、CSSだけでは表現できないようなこともJavaScriptを使って実現できるようになります。

例えば、video 要素で埋め込んだ動画が、ビューポートに入ったら再生し、ビューポートから出たら停止するといったことに使えます。