Skip to content

Commit ef40934

Browse files
javierbytejavierbyte
committed
Refactor Math. Added "random" views.
1 parent 2157a7f commit ef40934

13 files changed

+2034
-375
lines changed

‎.editorconfig

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
insert_final_newline = true
8+
trim_trailing_whitespace = true
9+
10+
[*.md]
11+
max_line_length = off
12+
trim_trailing_whitespace = false

‎.eslintrc.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
},
6+
extends: 'eslint:recommended',
7+
parserOptions: {
8+
ecmaVersion: 'latest',
9+
sourceType: 'module',
10+
},
11+
rules: {},
12+
};

‎.gitignore

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/dist
5+
.vercel
6+
/node_modules
7+
/.pnp
8+
.pnp.js
9+
10+
# testing
11+
/coverage
12+
13+
# production
14+
/build
15+
16+
# misc
17+
.DS_Store
18+
.env.local
19+
.env.development.local
20+
.env.test.local
21+
.env.production.local
22+
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*

‎.prettierrc

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"singleQuote": true,
3+
"printWidth": 80,
4+
"editor.formatOnSave": true,
5+
"proseWrap": "always",
6+
"tabWidth": 2,
7+
"requireConfig": false,
8+
"useTabs": false,
9+
"trailingComma": "es5",
10+
"bracketSpacing": true,
11+
"jsxBracketSameLine": false,
12+
"semi": true
13+
}

‎README.md

+8-43
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,13 @@
1-
# Control User Cursor.
2-
Small experiment to alter the cursor behavior.
1+
# Control User Cursor
32

4-
[![control-user-cursor](docs-assets/thumbnail.jpg)](http://javier.xyz/control-user-cursor/)
3+
Small experiment to 'control' the user cursor with JavaScript and CSS.
54

6-
## How it works?
7-
I make the user cursor invisible, and then paint my own cursor with JS! The `:hover` styles are also fake.
8-
9-
Most of the math is here https://github.com/javierbyte/control-user-cursor/blob/master/index.js#L134
10-
11-
## Usage
12-
13-
As this was only planned to be a demo, the current API is kinda rough:
14-
15-
```js
16-
ControlUserCursor({
17-
el: {
18-
buttonToPrevent: {
19-
behavior: 'REPEL',
20-
el: document.querySelector('.element-to-repel')
21-
},
22-
buttonToAttract: {
23-
behavior: 'ATTRACT',
24-
el: document.querySelector('.element-to-attract')
25-
}
26-
}
27-
});
28-
```
5+
[![control-user-cursor](docs-assets/thumbnail.jpg)](https://javier.xyz/control-user-cursor/)
296

30-
This will replace the real cursor with the fake one and activate the 'repel' and 'attract' behavior on the selected dom elements.
31-
32-
## Roadmap?
33-
34-
I would like to update the API to be like this:
35-
36-
```js
37-
// initiate cursor control
38-
ControlUserCursor()
39-
.repel('repel', document.querySelector('.el-to-repel'))
40-
.repel('repel', document.querySelector('.other-el-to-repeal'))
41-
.attract('attract-buy', document.querySelector('.el-to-attract'));
7+
## How it works?
428

43-
// stop `document.querySelector('.el-to-repel')` control
44-
controlUserCursor.stop('repel');
9+
I make the user cursor invisible, and then paint my own cursor with JS! The
10+
`:hover` styles are also fake.
4511

46-
// once there all the controls are stopped, the fake cursor disappears
47-
controlUserCursor.stopAll();
48-
```
12+
Most of the math is here
13+
https://github.com/javierbyte/control-user-cursor/blob/master/index.js#L134

‎assets/bg.svg

+3
Loading

‎control-user-cursor.jpg

117 KB
Loading

‎index.html

+42-47
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,62 @@
11
<!DOCTYPE html>
2-
32
<html>
43
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8-
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
98

109
<title>Control User Cursor</title>
11-
<meta property="og:title" content="Control User Cursor">
12-
13-
<meta name="description" content="Small example on how can we 'control' the user cursor.">
14-
<meta property="og:description" content="Small example on how can we 'control' the user cursor.">
15-
16-
<link rel="canonical" href="http://javier.xyz/control-user-cursor/">
17-
<meta property="og:url" content="http://javier.xyz/control-user-cursor/">
18-
19-
<meta property="og:image" content="http://javier.xyz/control-user-cursor/docs-assets/screenshot.png">
20-
21-
<link rel="stylesheet" href="style.css">
10+
<meta property="og:title" content="Control User Cursor" />
11+
12+
<meta
13+
name="description"
14+
content="Small experiment to 'control' the user cursor with JavaScript and CSS."
15+
/>
16+
<meta
17+
property="og:description"
18+
content="Small experiment to 'control' the user cursor with JavaScript and CSS."
19+
/>
20+
21+
<meta name="twitter:card" content="summary_large_image" />
22+
23+
<link rel="canonical" href="http://javier.xyz/control-user-cursor/" />
24+
<meta property="og:url" content="http://javier.xyz/control-user-cursor/" />
25+
26+
<meta
27+
property="og:image"
28+
content="http://javier.xyz/control-user-cursor/control-user-cursor.jpg"
29+
/>
30+
<meta property="og:image:width" content="1200" />
31+
<meta property="og:image:height" content="650" />
32+
33+
<link rel="stylesheet" href="style.css" />
2234
</head>
2335
<body>
2436
<div id="container"></div>
25-
<a href="https://github.com/javierbyte/control-user-cursor/" class="github-corner -prevent-custom-cursor" style="position: fixed;top:0;right:0;z-index: 1"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
2637

2738
<div class="info">
28-
<div class="info-title">
29-
Control User Cursor
30-
</div>
31-
39+
<h1>Control User Cursor</h1>
40+
3241
<div class="info-description">
3342
Small experiment to alter the cursor behavior.
43+
<a
44+
href="https://github.com/javierbyte/control-user-cursor"
45+
class="-prevent-custom-cursor"
46+
>
47+
How it works?</a
48+
>,
49+
<a href="#" data-toggle-cursor class="-prevent-custom-cursor">
50+
Show Real Cursor
51+
</a>
3452
</div>
3553

36-
<div class='options -prevent-custom-cursor'>
37-
<div class='options-element -active' data-type='basic'>
38-
Repel
39-
</div>
40-
<div class='options-element' data-type='doble'>
41-
Double Repel
42-
</div>
43-
<div class='options-element' data-type='attract'>
44-
Attract
45-
</div>
46-
<div class='options-element' data-type='combined'>
47-
Mixed
48-
</div>
49-
</div>
54+
<button data-new-random class="-prevent-custom-cursor">Random</button>
5055
</div>
5156

52-
<a href="https://github.com/javierbyte/control-user-cursor" class="how-it-works -prevent-custom-cursor">
53-
How it works?
54-
</a>
57+
<img id="cursor" data-cursor />
5558

5659
<script src="index.js"></script>
5760
<script src="setup.js"></script>
58-
<script>
59-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
60-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
61-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
62-
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
63-
ga('create', 'UA-44329676-12', 'auto');
64-
ga('send', 'pageview');
65-
</script>
6661
</body>
67-
</html>
62+
</html>

0 commit comments

Comments
 (0)