Total Pageviews

Monday, 5 June 2017

Intro.js

A better way for new feature introduction and step-by-step users guide for your website and project.

Intro.js v2.5.0

Better introductions for websites and features with a step-by-step guide for your projects.

Where to get

You can obtain your local copy of Intro.js from:
1) This github repository, using git clone https://github.com/usablica/intro.js.git
2) Using bower bower install intro.js --save
3) Using npm npm install intro.js --save
4) Download it from CDN (1, 2)

How to use

Intro.js can be added to your site in three simple steps:
1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.
CDN hosted files are available at jsDelivr (click Show More) & cdnjs.
2) Add data-intro and data-step to your HTML elements. To add hints you should use data-hint attribute.
For example:
<a href='http://google.com/' data-intro='Hello step one!'></a>
See all attributes here.
3) Call this JavaScript function:
introJs().start();
Optionally, pass one parameter to introJs function to limit the presentation section.
For example introJs(".introduction-farm").start(); runs the introduction only for elements with class='introduction-farm'.

Documentation

Please visit Documentation.

Using with:

Intro.js has many wrappers for different purposes. Please visit Documentation for more info.

Build

First you should install nodejs and npm, then first run this command: npm install to install all dependencies.
Now you can run this command to minify all static resources:
make build 
 
from  https://github.com/usablica/intro.js

No comments:

Post a Comment