File size: 3,460 Bytes
5f830d1 2b7567f 5f830d1 2b7567f ec45071 2b7567f 5f830d1 2b7567f ede8cb9 2b7567f 5f830d1 d86254c 1809cfd 22c7264 ede8cb9 ec45071 ede8cb9 ec45071 ede8cb9 22c7264 5f830d1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!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>
<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
});
document.querySelector('.btn__example')
.addEventListener('click', function () {
sholo.highlight('.section__header');
});
</script>
</body>
</html> |