@sygnas/vue-inview v0.3.0

syg-vue-inview

Vue用のIntersectionObserverなもの。

Description

スクロールしてビューポートに入ったらdata属性を与える。

画面に入ったらエフェクトを加えたいけど、余計な機能は不要、cssは自分で書く、という人向け。

Release

• 2022.07.29
  • Vue3用に変更
• 2019.11.14
  • とりあえず公開

Usage

Install

npm install --save @sygnas/vue-inview

html / JS / css

<div v-inview class="inview">foo</div>

import VueInview from '@sygnas/vue-inview';

Vue.use(VueInview);

.inview{
    opacity: 0;
    transform: translateY(20px);
    transition: .2s;

    // ビューポートに入ると data-inview属性が「true」になるので、
    // エレメントを表示させる
    &[data-inview = "true"]{
        opacity: 1;
        transform: translateY(0);
    }
}

License

MIT