storyjs

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.

Properties

• Pure javascript
• Ecmascript 6
• Editable properties

Test Address

projects.erselgulyaz.com/storyjs/

Usage

Install with terminal

npm install storyjs

Import your 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,
  },
  {
    id: 3,
    profilePic: "http://projects.erselgulyaz.com/storyjs/penguen.png",
    modalPic: "http://projects.erselgulyaz.com/storyjs/penguen.png",
    title: "Sample Item",
    time: 7,
  },
];
const sample = new storyjs({
  items,
  selector: "#storyjs-selector"
});

Parameters

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.