Package Exports

@niceoutside/curtain
@niceoutside/curtain/dist/cjs/main.js
@niceoutside/curtain/dist/esm/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@niceoutside/curtain) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

@niceoutside/curtain