Crumble - Web Site Feature Tour Plugin

File Size: 4.68 MB
Views Total: 2882
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Crumble - Web Site Feature Tour Plugin

Crumble - Feature Tour Plugin is A quirky, interactive feature tour using small visually interesting bubbles for steps along the way. 

Basic Usage:

1. Include jQuery script and other scripts

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.grumble.min.js"></script>

2. Call the function.

$(function(){
  $('#tour').crumble();
});

3. Create the Html for the tour. The text of each list element becomes the tour text, this is best kept as short as possible.

<ol id="tour" style="display: none;">
  <li data-target="#one" data-angle="130">
    The first step in the tour
  </li>
  <li data-target=".two" data-options="distance:20">
    This is the second step in the tour
  </li>
</ol>

4. Available configuration options.

$(function(){
  $('#tour').crumble({

    // options
    grumble: {
      text: '',
      angle: 85, 
      distance: 30, 
      showAfter: 0,
      hasHideButton: false
    },

    // animation speed
    scrollSpeed: 'fast',

    // callbacks
    onStep: function(){},
    onStart: function(){},
    onFinish: function(){}
    
  });
});

This awesome jQuery plugin is developed by tommoor. For more Advanced Usages, please check the demo page or visit the official website.