Crumble - Web Site Feature Tour Plugin
File Size: | 4.68 MB |
---|---|
Views Total: | 2946 |
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.