npm.io
0.3.0 • Published 4 years ago

@sygnas/vue-inview

Licence
MIT
Version
0.3.0
Deps
0
Size
13 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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

Keywords

scrolleffectnavigation