コンテンツにスキップ
Rola

Rolaを使い始める

Rola は、スクロールマネジメントライブラリです。

ビューポート内の要素の監視とスクラブ機能をパフォーマンスに考慮して提供します。

Rola は、 スクロールによる要素の状態を HTML の属性や CSS カスタムプロパティにセットすることにフォーカスしているため、 あとは、あなたの CSS の知見を使って自由にアニメーションを作成することが可能です。

インストール

Rola をプロジェクトで利用するには、パッケージマネージャーまたは CDN でRolaをインストール/インポート します。

  1. お使いのパッケージマネージャーに合わせてRolaをインストール

    Terminal window
    npm install @hilosiva/rola -D

  2. RolaをJavaScript（TypeScript）ファイルにインポート

    main.js
    import Rola from "@hilosiva/rola";

  3. 付属のCSSを利用する場合は、CSSファイルもインポート

    Viteなどのバンドラーを使っている場合は、CSSファイルまたは、JavaScript（TypeScript）ファイルにインポート、その他の場合は CDN で読み込む

    style.css
    @import "@hilosiva/rola";

セットアップ

Rolaにスクロールを監視してもらいたいHTMLの要素（トリガー要素）をセレクターにして、Rolaをインスタンス化します。

new Rola("CSSセレクタ");

例えば以下のようにします。

index.html
<div data-rola-trigger>
  ...
</div>
main.js
new Rola("[data-rola-trigger]");

これで、トリガー要素に data-rola-inview="false" がセットされ、トリガー要素がビューポート内に入った時に、data-rola-inview 属性 が true に切り替わります。

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

また、Rolaのオプションを使用すれば、トリガー要素が画面内に入ってから出るまでの進行度など、様々な情報をトリガー要素に付けることができるので、CSSを用意するだけで、パララックスなどのスクラブアニメーションも可能になります。

さぁ、スクロールの管理を Rola に任せましょう。