stories.js 🖼️

stories.js is a Web Component that allows you to create stories on your website.

Example

To advance a story, you can click on either the story image or use the right keyboard arrow.

To move back a story, you can use the left keyboard arrow.

When all stories have been viewed, or when the user clicks the X button, the stories will close.

First, define a list that specifies all of the objects you want to show in your story:


var images = [
    "",
    ...
];

Then, link to the stories.js stylesheet and script and add the <html-story> element to your page.


<template>
    <link rel="stylesheet" href="stories.css">
</template>

<html-story></html-story>

<script src="stories.js"></script>

Finally, call the show() method on the <html-story> in any element that you want to trigger the story pop up:


<button onclick="document.querySelector('html-story').show()">Show</button>