|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" |
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> |
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|
|
<title>Sholo</title> |
|
|
<link rel="stylesheet" href="./assets/styles/css/demo.css"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="page-wrap"> |
|
|
<section class="section__header" data-sholo="Hey welcome to presenter!"> |
|
|
<h1>Sholo</h1> |
|
|
<p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in |
|
|
spotlight</p> |
|
|
<a href="javascript:void(0)" class="btn btn__example btn__dark">Show an Example</a> |
|
|
<a href="javascript:void(0)" class="btn btn__light">Learn More</a> |
|
|
</section> |
|
|
<section class="section__purpose"> |
|
|
<h1>Whats does it do?</h1> |
|
|
<p>Let's you bring any component on the page into the spotlight.</p> |
|
|
<p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can |
|
|
use it to make powerful introduction for different features of your application or for example if you want to |
|
|
highlight some component that needs user attention.</p> |
|
|
</section> |
|
|
<section class="section__how"> |
|
|
<h1>How does it do that?</h1> |
|
|
<p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some |
|
|
element</p> |
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore |
|
|
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus |
|
|
reprehenderit tempora!</p> |
|
|
</section> |
|
|
<section class="section__examples"> |
|
|
<h1>Can you show some Examples?</h1> |
|
|
<p>Here are some of the examples</p> |
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore |
|
|
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus |
|
|
reprehenderit tempora!</p> |
|
|
</section> |
|
|
<section class="section__learn"> |
|
|
<h1>I want to learn more</h1> |
|
|
<p>Here are some of the examples</p> |
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore |
|
|
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus |
|
|
reprehenderit tempora!</p> |
|
|
</section> |
|
|
<section class="section__contributing"> |
|
|
<h1>Contributing</h1> |
|
|
<p>Here are some of the examples</p> |
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore |
|
|
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus |
|
|
reprehenderit tempora!</p> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script src="./assets/scripts/dist/sholo.js"></script> |
|
|
<script> |
|
|
const sholo = new Sholo({ |
|
|
animate: true, |
|
|
opacity: 0.8, |
|
|
padding: 5 |
|
|
}); |
|
|
|
|
|
sholo.defineSteps([ |
|
|
{ |
|
|
element: '.section__header', |
|
|
popover: { |
|
|
title: 'Adding Introductions', |
|
|
description: 'You can use it to add popovers on top of the website', |
|
|
position: 'bottom', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
element: '.btn__example', |
|
|
popover: { |
|
|
title: 'Adding Introductions', |
|
|
description: 'You can use it to add popovers on top of the website', |
|
|
position: 'left', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
element: '.btn__light', |
|
|
popover: { |
|
|
title: 'Adding Introductions', |
|
|
description: 'You can use it to add popovers on top of the website', |
|
|
position: 'right', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
element: '.section__how', |
|
|
popover: { |
|
|
title: 'Just Specify the Item', |
|
|
description: 'All you have to do is provide the query selector of element to highlight', |
|
|
position: 'right' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
element: '.section__purpose', |
|
|
popover: { |
|
|
title: 'Automatically Position', |
|
|
description: 'It can automatically position too if you dont provide' |
|
|
} |
|
|
}, |
|
|
{ |
|
|
element: '.section__examples', |
|
|
}, |
|
|
{ |
|
|
element: '.section__contributing', |
|
|
popover: { |
|
|
title: 'Automatically Position', |
|
|
description: 'It can automatically position too if you dont provide' |
|
|
} |
|
|
}, |
|
|
]); |
|
|
|
|
|
document.querySelector('.btn__example') |
|
|
.addEventListener('click', function () { |
|
|
sholo.start(); |
|
|
}); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
