Curtain
TODOs
- [ ] use transform/translate for better performance
- [ ] create supporting packages
- [x] 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
string
)
color (The color
property defines the color of the curtain.
pole.hang(curtainGreen, { color: 'green');
pole.hang(curtainBlack, { color: '#000');
number
)
yOffset (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' });