https://github.com/codingtuto/codingintrojs
A lightweight library for interactive guided tours with a stylish spotlight effect.
https://github.com/codingtuto/codingintrojs
Last synced: 11 months ago
JSON representation
A lightweight library for interactive guided tours with a stylish spotlight effect.
- Host: GitHub
- URL: https://github.com/codingtuto/codingintrojs
- Owner: codingtuto
- License: mit
- Created: 2025-03-08T18:17:01.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-03-08T18:24:40.000Z (12 months ago)
- Last Synced: 2025-03-08T19:26:36.172Z (12 months ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CodingIntroJS - Your Super-Easy Guide to Interactive Website Tours
đź‘‹ **Welcome to CodingIntroJS!** Want to guide your users through your website in a fun and interactive way? This lightweight JavaScript library lets you create guided tours with smooth spotlight effects, making your site more engaging and user-friendly.
---
## Features
| Feature | Description |
|-----------------------|-----------------------------------------------------------------------------|
| 🎯 **Spotlight Magic** | Highlight important elements with a smooth blur effect to focus user attention.|
| ✨ **Customizable Tooltips** | Customize tooltip colors, titles, and content to fit your website’s style. |
| 🚀 **Simple Setup** | Easy to implement by just including the script and defining your tour steps.|
| ⌨️ **Keyboard Navigation** | Allows users to navigate using the keyboard for better accessibility. |
| 📱 **Responsive Design** | Works seamlessly across all screen sizes (desktop, tablet, mobile). |
| ⚡ **Lightweight & Fast** | No extra bloat—keep your site fast and lean. |
---
## Installation
### CDN Installation
To quickly get started, you can use the CDN version of `CodingIntroJS`. Add the following lines to your HTML:
```html
```
---
## Usage
### Step 1: Define Your Tour Steps
Create an array of objects to define each tour step, including which elements to spotlight and the tooltip content.
```javascript
const tourSteps = [
{
selector: '#main-title',
title: 'Welcome!',
content: 'This is the main title of our website.'
},
{
selector: '.nav-link',
title: 'Navigation Links',
content: 'Use these links to navigate the site.',
tooltipPosition: 'bottom'
},
{
selector: '#cta-button',
title: 'Call to Action!',
content: 'Click this button to get started!',
tooltipPosition: 'top'
}
];
```
### Step 2: Create and Initialize the Tour
After defining the tour steps, create a new instance of `CodingIntroJS` and start the tour:
```javascript
const tour = new CodingIntroJS(tourSteps);
tour.init();
```
Optionally, you can customize the look by passing an options object:
```javascript
const tour = new CodingIntroJS(tourSteps, {
tooltipBackgroundColor: '#f0f0f0',
tooltipTitleColor: '#333',
tooltipContentColor: '#555',
animationSpeed: 500, // Slower animations
allowClose: false, // Disable close button
onFinish: function() {
alert("Tour finished! You're now a website pro!");
}
});
tour.init();
```
---
## Customization Options
You can tweak many aspects of the tour to match your style and preferences. Here are the available options:
| Option | Description |
|--------------------------|-----------------------------------------------------------------------------|
| `spotlightPadding` | Extra space around the spotlighted element (default: 20px). |
| `overlayOpacity` | Transparency of the overlay (range: 0 to 1, default: 0.92). |
| `tooltipBackgroundColor` | Background color of the tooltip (default: dark gradient). |
| `tooltipTitleColor` | Title text color in the tooltip (default: #4285f4). |
| `animationSpeed` | Speed of animations (in milliseconds, default: 300). |
| `keyboardNavigation` | Enable/disable keyboard navigation (default: true). |
| `onStart`, `onFinish` | Functions to call when the tour starts/ends. |
Example of using options:
```javascript
const tour = new CodingIntroJS(tourSteps, {
overlayOpacity: 0.8,
tooltipBackgroundColor: '#f0f0f0',
tooltipTitleColor: '#333',
animationSpeed: 500,
allowClose: false,
onFinish: function() {
alert("You're now a website pro!");
}
});
tour.init();
```
---
## Example
Here’s a minimal example to help you get started quickly. Copy and paste the code into your `index.html` file, and open it in your browser!
```html
My Demo Website
body { font-family: sans-serif; }
nav ul { list-style: none; padding: 0; }
nav li { display: inline-block; margin-right: 20px; }
nav a { text-decoration: none; color: #007bff; }
button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
Welcome to My Demo Website!
Here’s some content, we’ll guide you through it with a tour.
Learn More
document.addEventListener('DOMContentLoaded', function() {
const tourSteps = [
{ selector: '#main-title', title: 'Hello!', content: 'This is our main title.' },
{ selector: 'nav', title: 'Navigation', content: 'Use these links to navigate the site.' },
{ selector: '#cta-button', title: 'Click Me!', content: 'Click this button to learn more!' }
];
const tour = new CodingIntroJS(tourSteps);
tour.init();
});
```
---
## Contributing
We welcome contributions! If you have ideas for improvements, bug fixes, or new features, feel free to open an issue or submit a pull request. Here's how you can contribute:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature-name`).
3. Commit your changes (`git commit -am 'Add new feature'`).
4. Push to the branch (`git push origin feature-name`).
5. Open a pull request.
---
## License
This project is licensed under the MIT License. Feel free to use it in your personal and commercial projects.
---