Lightweight Site Feature Tour Plugin – uxTour.js

Category: Javascript , Recommended | June 8, 2016
Author: lyngbach
Views Total: 2,421
Official Page: Go to website
Last Update: June 8, 2016
License: MIT

Preview:

Lightweight Site Feature Tour Plugin – uxTour.js

Description:

uxTour.js is a lightweight vanilla JavaScript library which helps you create an interactive feature tour by highlighting the specified element with a circular mask.

How to use it:

Download and load the uxTour.js library when needed.

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

Initialize the plugin with some optional properties.

var uxTour = new uxTour();
Set the steps for the tour. This is where you forexmaple dynamically empty and add new steps for dynamic page loads.
var tour = {
    steps: [
        {element: 'uxStep1', text: 'Here you can have some related text'},
        {element: 'uxStep2', text: 'You can allways start the ux tour guide again here. This also works on fixed items', style: 'fixed'},
        {element: 'uxStep3', text: 'Includes auto scrolling.<br> Is also responsive. try resize the window!', position: 'top'},
        {element: 'view-source', text: 'This demo page is based on MDL-lite framework.<br> Klik here to see more about this awesome material design framework', style: 'fixed', position: 'top'}
    ]   
};

Start the tour. Pack it into a function for re-opening the ux guide.

uxTour.start(tour);

You Might Be Interested In:


2 thoughts on “Lightweight Site Feature Tour Plugin – uxTour.js

  1. Chris Berberich

    This is a fantastic plugin and ideal if you want a lightweight plugin. Kudos to the developer!

    Reply
  2. Kylian

    Very nice ! However, the autoscrolling function doesn’t seem to work in Chrome…

    Reply

Leave a Reply