1.0.3 • Published 11 months ago
@realign-scope/kontext v1.0.3
@realign-scope/kontext
A page switcher with 3d effects.
Install
$ npm i @realign-scope/kontext --saveUsage
The basic page structure
<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>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
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
background-color: #333;
color: #fff;
}
.kk-layer {
background: tomato;
}