|
|
<!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 id="sholo-popover-item"> |
|
|
<div class="sholo-popover-tip"></div> |
|
|
<div class="sholo-popover-title">Did you know?</div> |
|
|
<div class="sholo-popover-description">You can make step by step introductions with sholo!</div> |
|
|
<div class="sholo-popover-footer"> |
|
|
<a href="javascript:void(0)" class="sholo-close-btn">Close</a> |
|
|
<span class="sholo-btn-group"> |
|
|
<a class="sholo-prev-btn" href="javascript:void(0)">← Previous</a> |
|
|
<a class="sholo-next-btn" href="javascript:void(0)">Next →</a> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<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' }, |
|
|
{ element: '.section__how' }, |
|
|
{ element: '.section__purpose' }, |
|
|
{ element: '.section__examples' }, |
|
|
{ element: '.section__contributing' }, |
|
|
]); |
|
|
|
|
|
document.querySelector('.btn__example') |
|
|
.addEventListener('click', function () { |
|
|
sholo.start(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
