mirror of
https://github.com/kamranahmedse/driver.js.git
synced 2026-10-31 20:31:43 +08:00
92 lines
3.9 KiB
HTML
92 lines
3.9 KiB
HTML
<!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> |