open-index/open-npm huggingface dataset:
npm package: @realign-scope/kontext
Description: A web library, KonText.
Latest version: 1.0.3

# @realign-scope/kontext

A page switcher with 3d effects.

## Install

```bash
$ npm i @realign-scope/kontext --save
```

## Usage

The basic page structure

```html
<body>
  <article id="main-container">
    <div class="kk-layer one">
      <h2>Layer First</h2>
    </div>
    <div class="kk-layer two">
      <h2>Layer Second</h2>
    </div>
    <div class="kk-layer three">
      <h2>Layer Third</h2>
    </div>
  </article>
</body>
```

```js
import KonText from '@realign-scope/kontext';
const konText = KonText.init({
  containerId: 'main-container',
  layerClassname: 'kk-layer',
  defaultLayerIndex: 1,
  onChange(idx) {
    console.log('onChange: ', idx);
  },
});

document.addEventListener(
  'keyup',
  (event) => {
    const kc = `${event.keyCode}`;

    // left arrow
    if (kc === '37') {
      konText.prev();
    }
    // right arrow
    if (kc === '39') {
      konText.next();
    }
  },
  false,
);
```

Basic style based on page structure

> The background color should be different from the page color

Here is a reference to the basic styles

```css
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  background-color: #333;
  color: #fff;
}

.kk-layer {
  background: tomato;
}
```