-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex1.html
130 lines (127 loc) · 12 KB
/
index1.html
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
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="Pavel Laptev">
<meta property="og:title" content="Pavel Laptev">
<meta property="og:image"
content="https://raw.githubusercontent.com/PavelLaptev/context-cursor/master/preview/assets/og-preview.png">
<meta property="og:url" content="https://pavellaptev.github.io/context-cursor/">
<meta property="og:description"
content="An experimental cursor that takes the shape of the hovered element inspired by iPad poineter.">
<link rel="icon" href="lib/ico-16x16.png?0705114f45538bdfddf2">
<link href="lib/style.css?0705114f45538bdfddf2" rel="stylesheet">
</head>
<body>
<div class="wrap">
<section class="navigation"><a href="https://medium.com/@PavelLaptev/ipad-pointer-on-the-web-f3aaf48d515c"
target="_blank" class="btn-transparent" data-ccursor title="Article on Medium"><i class="btn-icon"><svg
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.348 3.555C0 5.573 0 8.382 0 14s0 8.427 1.348 10.445a8 8 0 002.207 2.207C5.573 28 8.382 28 14 28s8.427 0 10.445-1.348a8.001 8.001 0 002.207-2.207C28 22.427 28 19.618 28 14s0-8.427-1.348-10.445a8 8 0 00-2.207-2.207C22.427 0 19.618 0 14 0S5.573 0 3.555 1.348a8 8 0 00-2.207 2.207zm23.5 17.893v.33h-8.54v-.33l1.759-1.535c.173-.156.173-.202.173-.44v-8.907l-4.89 11.175h-.662L6.994 10.566v7.49a.975.975 0 00.316.86l2.288 2.496v.329H3.111v-.33L5.4 18.917a.934.934 0 00.294-.86v-8.66a.724.724 0 00-.273-.641L3.386 6.552v-.33H9.7l4.88 9.63 4.291-9.63h6.019v.33L23.15 8.05a.437.437 0 00-.194.44V19.51a.437.437 0 00.194.44l1.697 1.498z" />
</svg> </i></a><a href="https://github.com/PavelLaptev/context-cursor" target="_blank"
class="btn-transparent" data-ccursor title="GitHub Repository"><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg> </i></a><a href="https://pavellaptev.github.io/" target="_blank" class="btn-transparent"
data-ccursor title="My Website"><i class="btn-icon btn-icon-ava"></i></a>
<a href="#" class="btn-colormode" id="darkmode-button" data-ccursor title="Switch color modes"><span>Dark
Mode</span> <i class="btn-icon">
<div class="moon-icon" id="moon-icon"></div>
</i></a></section>
<section class="title">
<h1 class="title-header">context cursor</h1>
<h3 class="title-subheader">A cursor that takes the shape of the hovered element. Inspired by <a
href="https://developer.apple.com/videos/play/wwdc2020/10640" data-ccursor target="_blank">iPad
Pointer</a>.</h3>
</section>
<hr>
<section class="section">
<h2>Demo</h2>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor><span>Parallax button</span></a> <a
href="#" class="btn-transparent" data-ccursor><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg></i></a></div>
</div>
<div class="preview preview_last">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor="lift"><span>Lift button</span></a>
<a href="#" class="btn-transparent" data-ccursor="lift"><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg></i></a>
</div>
</div>
</section>
<section class="section">
<h2>Usage</h2>
<h3>Default Setup</h3>
<p>Copy the module into your project. In order to make the cursor works — you need to add a data tag
<b>`data-ccursor`</b> to the HTML element on which you want to use the cursor and run the function in
your JS.
</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.HTML </span><span><button data-ccursor>Button</button> </span><span class="code-file">*.JS </span><span>contextCursor();</span></code>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor><span>Parallax button</span></a>
<a href="#" class="btn-transparent" data-ccursor><i class="btn-icon"><svg fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C6.265 0 0 6.423 0 14.354c0 6.352 4.008 11.717 9.572 13.619.7.125.963-.305.963-.682 0-.341-.018-1.471-.018-2.674-3.517.664-4.427-.879-4.707-1.686-.157-.413-.84-1.687-1.435-2.028-.49-.269-1.19-.933-.018-.95 1.103-.019 1.89 1.04 2.153 1.47 1.26 2.172 3.273 1.562 4.078 1.185.122-.933.49-1.561.892-1.92-3.115-.359-6.37-1.597-6.37-7.087 0-1.562.542-2.853 1.435-3.858-.14-.359-.63-1.83.14-3.804 0 0 1.173-.377 3.85 1.471a12.69 12.69 0 013.5-.484c1.19 0 2.38.161 3.5.484 2.677-1.866 3.85-1.471 3.85-1.471.77 1.974.28 3.445.14 3.804.893 1.005 1.435 2.279 1.435 3.857 0 5.509-3.273 6.729-6.387 7.088.507.448.944 1.31.944 2.655 0 1.92-.017 3.463-.017 3.948 0 .377.262.825.962.682C23.992 26.07 28 20.688 28 14.354 28 6.424 21.735 0 14 0z" />
</svg></i></a>
</div>
</div>
</div>
</section>
<section class="section">
<h3>Effects</h3>
<p>There are two basic effects — <b>Morph</b> (default) and <b>Lift</b>. If you want to use Lift effect just
add it to the data-ccursor attribute.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.HTML — DEFAULT PARALLAX </span><span><button data-ccursor>Button</button> </span><span class="code-file">*.HTML — LIFT </span><span><button data-ccursor=<b>”lift”</b>>Button</button></span></code>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor><span>Parallax</span></a> <a
href="#" class="btn-primary" data-ccursor="lift"><span>Lift</span></a></div>
</div>
</div>
</section>
<section class="section">
<h3>Local settings</h3>
<p>You can disable parallax and paddings effects only for certain elements if you add <b>`noParallax`</b>
and <b>`noPadding`</b> to the <b>`data-ccursor`</b> attribute. You can combine these two props.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.HTML — DEFAULT PARALLAX </span><span><button data-ccursor>Button</button> </span><span class="code-file">*.HTML — LIFT </span><span><button data-ccursor=<b>”lift”</b>>Button</button></span></code>
<div class="preview">
<div class="btn-wrap"><a href="#" class="btn-primary" data-ccursor="noParallax"><span>No
parallax</span></a> <a href="#" class="btn-primary" data-ccursor="noPadding"><span>No
padding</span></a></div>
</div>
</div>
</section>
<section class="section">
<h3>Global settings</h3>
<p>Global settings are settings that will affect all target elements and the cursor itself. You can adjust —
cursor size, cursor speed, parallax shift index on hover, and paddings on hover.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.JS </span><span>contextCursor({<br> radius: 20, //will change the radius/size of the cursor<br> transitionSpeed: 0.2, //To change thee cursor speed<br> parallaxIndex: 16, //how vv cvv you want to shift elements<br> hoverPadding: 6, //will change the cursor padding around target element<br>});</span></code>
</div>
</section>
<section class="section">
<h3>Change styles</h3>
<p>Cursor styles are written as CSS variables in the root directory, so you can easily overwrite them. Also,
you can change the cursor active style — hover event will add <b>`c-cursor_active`</b> class to the
cursor.</p>
<div class="codepreview"><code
class="code"><span class="code-file">*.CSS — CURSOR STYLES </span><span>:root {<br> --main-cursor-clr: rgb(0, 0, 0, 0.2);<br> --main-cursor-hover-clr: rgb(0, 0, 0, 0.07);<br> --ghost-shadow: 0 7px 15px rgba(0, 0, 0, 0.14);<br>}<br><br>body {<br> margin: 0;<br> padding: 0;<br>}<br><br>.c-cursor {<br> position: fixed;<br> z-index: 9999;<br> pointer-events: none;<br> border-radius: 200px;<br> background-color: var(--main-cursor-clr);<br>}</span></code>
</div>
</section>
</div>
<script src="lib/main.1b3cb8da41fa378dcfd7.js?0705114f45538bdfddf2"></script>
</body>
</html>