@fekit/inview
v1.0.0
Published
This plugin can set page elements to play animations when they enter the visible area, so as to build a web page with an awesome experience.
Downloads
14
Readme
@fekit/inview
This plugin can set page elements to play animations when they enter the visible area, so as to build a web page with an awesome experience.
Catalog
Demos
https://mcui.fekit.cn/#route=plugins/js/inview
Install
npm i @fekit/inview
or
yarn add @fekit/inview
Options
{
el {String} // Selector
theme {String} // Specify animation theme
offset {Number} // 0-1, The offset when the element triggers the animation
once {Number} // whether to play animation only once
on:{
view {Function} // Fired when entering the viewport
none {Function} // Fired when leaving the viewport
}
}
Example
React
import React, { useLayoutEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';
// import @fekit/inview
import Inview from '@fekit/inview';
// import a theme
import Inview from '@fekit/inview/theme/[email protected]';
function Root() {
const inview: any = useRef(null);
const { pathname = '' } = useLocation();
useLayoutEffect(() => {
// Create an instance
demo.current = new Inview({
el: '.am-inview',
// Specify an animation theme
theme: 'aa',
});
return () => {
// Destroy instance
if (demo.current) {
demo.current.destroy();
}
};
}, []);
useLayoutEffect(() => {
// Usually the instance is refreshed when the URL changes, but it can also be refreshed whenever needed
if (demo.current) {
demo.current.refresh();
}
}, [pathname]);
return (
<div>
<ul>
<li class="am-inview">the element to be animated</li>
<li class="am-inview">the element to be animated</li>
</ul>
</div>
);
}
Plain JS
import Inview from '@fekit/inview';
const myDemo = new Inview({
el: '.demo',
// Specify an animation theme
theme: 'ab',
on: {
view(dom) {
console.log(dom, 'The element has entered the viewable area');
},
none(dom) {
console.log(dom, 'The element has left the viewable area');
},
},
});
window.onload = function() {
myDemo.refresh();
};
Themes
The following animated themes are currently available:
scss
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
css
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
- @fekit/inview/theme/[email protected]
Version
v0.1.2 [Latest version]
1. Updated documentation
2. The original scss theme file also packs a css file
v0.1.1
Updated documentation
v0.1.0
Refactored with typescript, the package turned out to be @fekit/mc-inview.