AnimateOnScroll

AnimateOnScroll は、スクロール中にビューポートに出入りする要素にアニメーションを適用するために使用されます。

インポート #


import AnimateOnScroll from 'primevue/animateonscroll';

app.directive('animateonscroll', AnimateOnScroll);

基本 #

アニメーションクラスは、enterClassプロパティとleaveClassプロパティで定義されます。この例ではPrimeFlexアニメーションを使用していますが、有効なCSSアニメーションであれば何でもサポートされます。

スクロールダウン

フェードイン

左からフェードイン

右からフェードイン

ズーム

左からフリップ

Y軸方向フリップ

スケールイン


<div v-animateonscroll="{ enterClass: 'animate-fadein', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000">
    <span class="text-3xl font-bold">fade-in</span>
</div>

<div v-animateonscroll="{ enterClass: 'animate-fadeinleft', leaveClass: 'animate-fadeoutleft' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
    <span class="text-3xl font-bold">fade-left</span>
</div>

<div v-animateonscroll="{ enterClass: 'animate-fadeinright', leaveClass: 'animate-fadeoutright' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
    <span class="text-3xl font-bold">fade-right</span>
</div>

<div v-animateonscroll="{ enterClass: 'animate-zoomin', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000">
    <span class="text-3xl font-bold">zoom</span>
</div>

<div v-animateonscroll="{ enterClass: 'animate-flipleft', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
    <span class="text-3xl font-bold">flip-left</span>
</div>

<div v-animateonscroll="{ enterClass: 'animate-flipup', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
    <span class="text-3xl font-bold">flip-y</span>
</div>

<div v-animateonscroll="{ enterClass: 'animate-scalein', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
    <span class="text-3xl font-bold">scalein</span>
</div>

アクセシビリティ #

スクリーンリーダー

AnimateOnScrollは、役割や属性を必要としません。

キーボードサポート