Add images and update version

This commit is contained in:
Kamran Ahmed
2018-03-11 20:01:20 +01:00
parent e09eecc860
commit bceba744a8
4 changed files with 33 additions and 13 deletions
+31 -11
View File
@@ -1,14 +1,34 @@
## spotlight-js
> Allows highlighting any element, adding feature introduction, adding hints
<h1 align="center"><img src="./demo/images/driver.png" /> Driver.js</h1>
## Highlighting Single Elements
<p align="center">
<a href="https://creativecommons.org/licenses/by/4.0/">
<img src="https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg" />
</a>
<a href="http://makeapullrequest.com">
<img src="https://img.shields.io/badge/contributions-welcome-green.svg" />
</a>
<a href="http://twitter.com/kamranahmedse">
<img src="https://img.shields.io/badge/author-kamranahmedse-blue.svg" />
</a>
</p>
```javascript
const spotlight = new Spotlight({
opacity: 0.7, // opacity for the background
padding: 5, // padding around the element
});
<p align="center">
<b>A powerful yet light-weight, vanilla JavaScript engine to drive the user's focus across the page</b></br>
<sub>Only ~4kb, no external dependency, supports all major browsers and highly customizable <sub>
</p>
spotlight.highlight('#some-element');
spotlight.clear();
```
<br />
* **Simple**: is simple to use and has no external dependency at all
* **Light-weight**: ~4kb in size, vanilla JavaScript and no external dependency
* **Highly customizable**: has a powerful API and can be used however you want
* **Highlight anything**: highlight any (literally any) element on page
* **Feature introductions**: create powerful feature introductions and onboarding strategies
* **Focus shifters**: add focus shifters for users
* **User friendly**: Everything is controllable by keyboard
* **Consistent behavior**: usable across all browsers (including in-famous IE)
* **MIT Licensed**: free for personal and commercial use
![](./demo/images/split.png)
For Usage and Examples, [have a look at demo]()
Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 439 B

+2 -2
View File
@@ -1,7 +1,7 @@
{
"name": "driver.js",
"version": "1.0.0",
"description": "A light-weight, vanilla JS library to bring certain parts of page in spotlight",
"version": "0.1.0",
"description": "A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page",
"main": "./assets/scripts/dist/driver.min.js",
"scripts": {
"start": "node server.js",