WhatsNew.js is a lightweight plugin that helps you easily create a step-by-step tutorial in a modal format. It was designed for applications that need to explain new features to the client.
Visit the WhatNew.js Project Site for demos and documentations.
- Add WhatNew.js to your site document's
head
<link href="whatsNew.min.css" rel="stylesheet">
<script src="whatsNew.min.js"></script>
- Once the page loads, initialize a new WhatsNew. The first argument is the data and the (optional) second is extra options. Examine the API or Examples for a detailed usage of the plugin. Once initialize, it will return a WhatsNew object.
var whatsNewSteps = new WhatsNew([
{
title: "First Slide",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Big_Bear_Valley%2C_California.jpg/1200px-Big_Bear_Valley%2C_California.jpg",
content: "Hello World !"
},
{
title: "Second Slide",
img: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Big_Bear_Valley%2C_California.jpg/1200px-Big_Bear_Valley%2C_California.jpg",
content: "This is the second slide !",
}
]);
- Last but not last, start the WhatsNew once ready.
whatsNewSteps.start();
Not Needed ~ Vanilla JS :P
WhatsNew.js has been tested and works on IE 9+
, Chrome 32+
, Firefox 32+
and Safari 9+
WhatNew.js is licensed under the MIT license.