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

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' });