File size: 4,544 Bytes
5f830d1 2b7567f 5f830d1 2b7567f ede8cb9 2b7567f 5f830d1 d86254c 1809cfd 22c7264 fbfbee0 ede8cb9 5aa283f 5d08a61 a2f6883 cc0ef69 a2f6883 fa4fbb8 76a5158 a2f6883 5d08a61 cc0ef69 5d08a61 a2f6883 fa4fbb8 a2f6883 5d08a61 fa4fbb8 5d08a61 fa4fbb8 5d08a61 5aa283f ec45071 ede8cb9 5aa283f ede8cb9 cc0ef69 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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<!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> |