Intro.js – The Interactive Guide for glass site
Today we will talk about a little script called “Intro.Js” that I just discovered and that I find very interesting these days for the user experience.
Intro.js is a beautiful interactive guide to place on your site with created tags that the script will read in order, from the first to the last one and thus display info balloons help to better present the interface of your site to your new users. Simple, practical and efficient .
The team behind this little script is that of usabli.ca , three geeks from Tehran in Iran.
Intro.js is really light, only 6Kb and is compatible with most market browsers. Its ease of implementation will enable the most novice developers to be able to implement it on its website in complete peace.
Simply add two attributes to your tags so that it is an element in the tree of the guide. The first attribute is “data-step” where the value will define the display order, smaller to larger, so 1 for the first board and so on. And for the text that will be displayed in the bubble info, the second argument is “data-intro” with in value your description to display. Simple.
Read more: 6 Rollover Effects With JQuery and CSS3
In addition, this plugin offers a smooth navigation is allows in addition to navigate between the different via the mouse thanks to the clip on the following or previous arrows but also using the arrows on the keyboard. The ESC button will allow you to exit the guide help.
It’s up to you to have fun with this jQuery plugin to offer your users an interactive guide to better explain the idea to your site. If you install this module on your site, do not hesitate to contact us to let us know your feedback.