Reveal animations(明示的なアニメーション効果)
すべてのテンプレートには、ビューポートに要素が入るときに要素を表示するために使用できる一連のアニメーションが含まれています。 次の例は、HTML、React、および Vue テンプレートに適用されます。
要素をアニメーション化するには、利用可能なリビール効果クラスの 1 つを要素に追加します。
| Class | Description |
|---|---|
.reveal-fade | Element fades in |
.reveal-from-top | Element fades in from top to bottom |
.reveal-from-bottom | Element fades in from bottom to top |
.reveal-from-left | Element fades in from left to right |
.reveal-from-right | Element fades in from right to left |
.reveal-scale-up | Element fades in while scaling up |
.reveal-scale-down | Element fades in while scaling down |
.reveal-rotate-from-left | Element fades in while rotating anticlockwise along Y axis |
.reveal-rotate-from-right | Element fades in while rotating clockwise along Y axis |
Reveal offset
デフォルトでは、要素はそれ自体の 200 ピクセルがビューポートに入ると表示されます。 これを変更するには、data-reveal-offset 属性を明らかにする要素に追加し、ピクセル単位で異なる量を設定します。 たとえば、要素がビューポートに入るとすぐにリビール アニメーションをトリガーしたい場合は、この例のようにします 👇
<div
class='reveal-from-top'
data-reveal-offset='0'
>
Element
</div>Reveal delay
これは、同じ領域に配置された要素に対して交互にアニメーションを作成する場合に便利です。 たとえば 👇
<div class="reveal-from-top">Element 1</div>
<div class="reveal-from-top" data-reveal-delay="150">Element 1</div>
<div class="reveal-from-top" data-reveal-delay="300">Element 1</div>Bind reveal triggering to a parent element(公開トリガーを親要素にバインドする)
一連の公開要素があり、その親コンテナがビューポートに入るとすぐに公開を開始したいとします。これができることです 👇
<div class='parent'>
<div
class='reveal-from-top'
data-reveal-container='.parent'
>
Element 1
</div>
<div
class='reveal-from-top'
data-reveal-container='.parent'
data-reveal-delay='150'
>
Element 1
</div>
<div
class='reveal-from-top'
data-reveal-container='.parent'
data-reveal-delay='300'
>
Element 1
</div>
</div>Adjust reveal offset and timing(公開オフセットとタイミングを調整する)
デフォルトのオフセット値とタイミング値を変更する場合は、src/assets/scss/settings/base/_scroll-reveal.scss ファイルを確認してください。
その他の変更または統合 (たとえば、新しい露出効果を追加する場合) は、src/assets/scss/settings/theme/_scroll-reveal.scss ファイルに行う必要があります。
Turn-off reveal animations(アニメーション効果をオフにする)
<body> タグから .has-animations クラスを削除すると、公開アニメーションを無効にできます。