/ best free open source web resources /


Guide Your Users Through Demo Tour with Shepherd

Posted · Category: Demo Tour, License Free

Shepherd is a JavaScript library for guiding users through your app. It uses Tether, another open source library, to position all of its steps. Tether makes sure your steps never end up off screen or cropped by an overflow. You can easily guide your users through a tour of your app.


Requirements: JavaScript Framework
Demo: http://github.hubspot.com/shepherd/docs/welcome/
License: License Free

Clippy.js: Microsoft Agent (Clippy & Friends) in JavaScript

Posted · Category: Demo Tour, MIT License

Clippy.js adds Clippy or his friends to any website for instant nostalgia. It is a full Javascript implementation of Microsoft Agent (AKA Clippy and friends), ready to be embedded in any website.

Agents are composed of multiple sets of animations. However, unlike your Saturday morning cartoon, the animation is not linear. For example, while Links the cat is idle, behind the scenes a coin is flipped, and 10% of the time Links will turn about in boredom, or scratch behind his ears.


Requirements: JavaScript Framework
Demo: https://github.com/smore-inc/clippy.js
License: MIT License

Easily Add Product Tours with Hopscotch Framework

Posted · Category: Demo Tour

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

Hopscotch has several events to which you can assign callbacks. These events include start, end, next, prev, show, close, error. For the next, prev, and show events, you can assign callbacks within step definitions as well as in the tour itself.


Requirements: JavaScript Framework
Demo: http://linkedin.github.io/hopscotch/
License: Apache License

TourBus: jQuery Tour & Walkthrough jQuery Plugin

Posted · Category: Demo Tour, License Free

jQuery TourBus is a jQuery tour/walkthrough plugin. It takes more of a toolkit approach than some of the alternatives that try to have focusing elements, auto-progress with timers and indicators and etc.

Start by including the jQuery plugin and base styles on your page, of course. Then we can define some ‘legs’ of our tour. Imagine you have a page with some stuff you want to lead the user through. You’ll find the basics of the leg styles (padding, background color, etc) which you can either edit or override in your own stylesheets.


Requirements: jQuery Framework
Demo: http://ryanfunduk.com/jquery-tourbus/
License: License Free

Create Simple Overlay Instructions for Apps with jQuery

Posted · Category: Demo Tour

Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour. It is licensed under the Apache License, Version 2.0.


Requirements: jQuery Framework
Demo: http://heelhook.github.io/chardin.js/
License: Apache License 2.0

Create Step by Step Guide for Your Website with Intro.js

Posted · Category: Demo Tour, MIT License

Intro.js is better introductions for websites and features with a step-by-step guide for your projects. User have the ability to navigate with the mouse, or the keyboard – ←, →, ENTER and ESC to exit. It’s fast and small, with only 4 KB JavaScript and 2 KB CSS.

Better compatibility is on the roadmap, but currently it should work in recent versions of Firefox and Chrome (probably IE10, too!). It’s Free and open-source (including commercial use). It is released under MIT license.


Requirements: JavaScript Framework
Demo: http://usablica.github.com/intro.js/
License: MIT License

jQuery E-Help Embedded Help System for Web Apps

Posted · Category: Demo Tour, GPL License, MIT License

Embedded Help System is “providing help where help is needed” concept that can be easily integrated into web interface. The point is to offer help to user in their working interface and actual situation.

jQuery E-Help is plugin for procedural (“How to …”) web user interface help and it’s easy to integrate into any web interface that supports Jquery. Useful for all web applications, CMS and E-commerce systems.


Requirements: jQuery Framework
Demo: http://embedded-help.net/
License: GPL, MIT License

Slippy Takes a HTML File and Plays It In Any Browser

Posted · Category: Demo Tour, GPL License

Slippy is a HTML Presentation library written with jQuery, it takes a html file in and plays it in any browser. It is optimal for programming-related talks since it includes a syntax highlighter and is very easy to use since it’s just standard html markup with a few classes to enable specific functions.

If you are making a talk about Javascript, Slippy can even execute your code samples live and displays alert() boxes nicely instead of using the ugly browser dialog, which -I tried it today- works quite well to prove your point interactively.


Requirements: jQuery Framework
Demo: http://slides.seld.be/?file=2010-05-30+Example.html
License: GPL License

Easy Creation of On-Page Tutorials with Amberjack 2.0

Posted · Category: Demo Tour, LGPL License

We have mentioned Amberjack long time ago. Amberjack enables webmasters to create cool site tours. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.

Now they have released Amberjack 2.0, which allows easy creation of On-Page Tutorials. Users can navigate with bubble arrows, keyboard right/left or mouse click left/right. Text bubbles explain page elements to your visitors. You can also use HTML and CSS knowledge to customize the bubbles as you like. Embed a video is also possible.

You can have a look at the source here. However, we have to wait a bit longer, in order to get more tutorials and documentation of Amberjack 2.0.


Requirements: -
Demo: http://amberjack2.org/
License: LGPL

Reel – Provides 360° View of Anything

Posted · Category: Demo Tour, GPL License, MIT License

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash techniques. Stitched image is not required, but they do support them too.

Try reel for yourself. Place your mouse pointer over images below. And roll your mouse wheel up/down or drag the image left/right. Reel has been tested in Safari 3+, Firefox 3+, Chrome and IE 5.5+.


Requirements: jQuery Framework
Demo: http://jquery.vostrel.cz/reel
License: MIT and GPL License

Page 1 of 212»
Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons