Crumble makes it easy to create feature tours in your website or app.
A quirky, interactive feature tour using grumble.js for steps along the way.
Crumble works as a jquery plugin, the meta information for the tour is stored as a standard ordered list in the page HTML.
$('#tour').crumble();
<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>
The text of each list element becomes the tour text, this is best kept as short as possible. The possible parameters are:
Crumble can take a range of options to customise it's behaviour and look.
$('#tour').crumble({
scrollSpeed: 'fast',
grumble: {
distance: 40
},
onStep: function(){
console.log('you moved forward');
},
onStart: function(){
console.log('you started the tour');
},
onFinish: function(){
console.log('you finished the tour');
}
});
Crumble is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with Crumble. More Information
Crumble depends on and was inspired by Grumble.js
Releases are available for download from GitHub.