Karavai JS

KaravaiJS - Images sequence scrolling engine with no dependencies

Demo

Installation

CDN

<script src="https://unpkg.com/karavai@latest/karavai.es5.js"></script>

UMD

yarn add --exact karavai

npm install --save-exact karavai

Usage

// import package. You can miss this step for CDN installation
import Karavai from 'karavai';

const images = [...];
const canvasRef = document.querySelector('#my');

const karavai = new Karavai(images, canvasRef);

(async () => {
  await karavai.preloadImages()
  karavai.start()
}())

Configuration

Options

const options = {
  // Number
  // images change threshold in pixels.
  // Means: every N pixels, update image to the next one
  // Default: 30
  threshold: 30
};
const karavai = new Karavai(images, canvasRef, options);
karavai.start();

API

preloadImages - preloads provided amount of images. Default: all images. Returns: Promise. Preload is not required, but strongly recommended

const karavai = new Karavai(images, canvasRef);
karavai.preloadImages(); // -> Promise

start - start karavai. It will start logic which updates images on scroll.

const karavai = new Karavai(images, canvasRef);
karavai.start();

stop - stop karavai. It will stop logic which updates images on scroll.

const karavai = new Karavai(images, canvasRef);
karavai.stop();

License

Karavai.js is freely distributable under the terms of the MIT license.