0.3.2 • Published 1 year ago
@niceoutside/curtain v0.3.2
Curtain
TODOs
- use transform/translate for better performance
- create supporting packages
- svelte (not needed, can be used directly)
- react
- vue
- angular
Installation
npm i @niceoutside/curtain
Usage
Add a curtain
To add a curtain reveal effect to a node, attach a curtain to the HTML node.
import { CurtainPole } from './CurtainPole';
const pole = new CurtainPole();
const curtain = document.getElementById('curtain');
pole.hang(curtain);
Remove a curtain
You can remove a curtain by calling the following method:
const curtain = document.getElementById('curtain');
pole.takeDown(curtain);
Clean up
To remove everything at once, you can call the destroy
method:
pole.destroy();
Configuration
color (string
)
The color
property defines the color of the curtain.
pole.hang(curtainGreen, { color: 'green');
pole.hang(curtainBlack, { color: '#000');
yOffset (number
)
The yOffset
defines an offset factor for the y axis. Default is 0
- no offset.
Example: If the factor is -0.2
the curtain will be fully lifted 20% before the corresponding div reaches the top.
Example 2: If the factor is 0.5
the curtain will still hang 50% when the correspondig div reaches the top.
pole.hang(curtain, { yOffset: 0.5 });
anchors
It is possible to shift the anchor points of the curtain:
pole.hang(curtain, { anchors: { top: '10px', bottom: '10px', left: '5px', right: '5px' });