Crumble - Web Site Feature Tour Plugin
| File Size: | 4.68 MB |
|---|---|
| Views Total: | 2995 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











