@fekit/mc-inview

滚动到可视区域时播放动画

Usage no npm install needed!

<script type="module">
  import fekitMcInview from 'https://cdn.skypack.dev/@fekit/mc-inview';
</script>

README

MC-INVIEW

页面滚动时监听指定元素滚动到可视区域时播放动画

索引

演示

电脑:https://fekit.cn/plugins/mc-inview

手机:https://fekit.cn/plugins/mc-inview

开始

NPM

npm i @fekit/mc-inview

CDN

<script type="text/javascript" src="https://cdn.fekit.cn/@fekit/mc-inview/mc-inview.umd.min.js"></script>

参数

el      {String}   选择器
theme   {String}   插件配套的动画主题
offset  {Number}   元素触发动画时的偏移量 0-1
once    {Number}   是否仅播放一次动画
on:{
    view  {Function}  显示时触发
    none  {Function}  隐去时触发
}

示例

JS

import McInview from '@fekit/mc-inview';

// 为所有class为am-view的元素添加进入可视区状态监听
const myInView = new McInview({
  el: '.am-view',
  theme: 'ad',
  on: {
    view(dom) {
      console.log(dom, '这个元素滚动到可视区了');
    },
  },
});

// 页面更新内容时刷新插件
setTimeout(() => {
  document.body.innerHTML += `<div class="floor am-view">F11</div>
  <div class="floor am-view">F12</div>
  <div class="floor am-view">F13</div>
  <div class="floor am-view">F14</div>
  <div class="floor am-view">F15</div>
  <div class="floor am-view">F16</div>
  <div class="floor am-view">F17</div>
  <div class="floor am-view">F18</div>
  <div class="floor am-view">F19</div>`;
  myInView.refresh();
}, 5000);

SCSS

// 载入动画主题
@import '@fekit/mc-view/theme/mc-inview@theme=aa';
@import '@fekit/mc-view/theme/mc-inview@theme=ab';
@import '@fekit/mc-view/theme/mc-inview@theme=ac';
@import '@fekit/mc-view/theme/mc-inview@theme=ad';
@import '@fekit/mc-view/theme/mc-inview@theme=ae';

主题

目前可用的主题有:

  • mc-inview@theme=aa
  • mc-inview@theme=ab
  • mc-inview@theme=ac
  • mc-inview@theme=ad
  • mc-inview@theme=ae

版本

v1.0.9
1. 新增 refresh() 方法刷新,用于页面有异步加载的内容时刷新插件。
v1.0.6
1. 新增3款主题
2. 修改HTML可自定义主题
v1.0.3
1. 新增一款主题mc-inview@theme=ac.scss
v1.0.2
1. 重构核心代码,优化性能
v1.0.1
1. 此版本精简了代码,取消了onshow和onhide,回调合并为一个then,可以通赤then回调的传参来判断是显示还是消失及其它一些操作。

反馈

如果您在使用中遇到问题,请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com