Storyjs is a javascript library similar to the story areas we often use in our social media applications. If you want to create and manage storyboard for your website, you only need to add the storyjs between the project files. Afterwards, you can arrange its appearance according to your wishes.
Install with terminal
npm install storyjs
Import js file
import storyjs from "storyjs";
Import scss or css file
@import "storyjs/src/story-styles.scss";
// OR
@import "storyjs/dist/storyjs-styles.css";
Init
const items = [
{
id: 1,
profilePic: "http://projects.erselgulyaz.com/storyjs/horse.png",
modalPic: "http://projects.erselgulyaz.com/storyjs/horse.png",
title: "Sample Item",
time: 10,
},
{
id: 2,
profilePic: "http://projects.erselgulyaz.com/storyjs/panda.png",
modalPic: "http://projects.erselgulyaz.com/storyjs/panda.png",
title: "Sample Item",
time: 3,
}
]
const sample = new storyjs({
items,
selector: "#storyjs-selector"
});
| Name | Type | Default | Description |
|---|---|---|---|
| items | Array | null | Array should come as shown above. ID values must be in order. The inside of each Object must be prepared with the same variables. |
| selector | String | #storyjs-selector | The container to be selected for the creation of Storyjs must be written on the page. |