forked from dshongphuc/magic-mouse-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·158 lines (146 loc) · 6.27 KB
/
index.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>MagicMouse.js - effects for cursor on website</title>
<meta name="description" content="A lightweight javascript library to create some amazing effects for the mouse (cursor) on your website">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/magic-mouse.css" />
<link rel="stylesheet" href="css/website.css" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-161480435-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-161480435-1');
</script>
</head>
<body>
<div id="app">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a href="#" class="navbar-brand"><img src="images/logo.svg" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link magic-hover magic-hover__square" href="#">home <span class="sr-only">(current)</span></a>
</li>
<li><a href="#" class="nav-link magic-hover magic-hover__square">about</a></li>
<li><a href="#" class="nav-link magic-hover magic-hover__square">how it works</a></li>
<li><a href="#" class="nav-link magic-hover magic-hover__square">blog</a></li>
<li><a class="nav-link no-cursor">No cursor</a></li>
</ul>
</div>
</nav>
</div>
<div class="container main-body">
<div class="row">
<div class="col-6 code-section">
<pre id="codeSection" class="prettyprint">options = {{options}}
magicMouse(options);
</pre>
<div class="try-section">
<select class="form-control form-control-sm" v-model="selectedEffect">
<option v-for="effect in effectList" :value="effect">{{effect}}</option>
</select>
<button class="btn btn-mm-dark magic-hover magic-hover__square" @click="changeEffect()">Try it</button>
</div>
</div>
<div class="col-6 text-section">
<h1>magicmouse.js</h1>
<p>An opensource library that help you to create some magic effects for the mouse (cursor) of your website</p>
<div class="btn-section">
<a href="dist/magicmouse-1.0.zip" class="btn btn-mm-light magic-hover magic-hover__square">download</a>
<a href="https://github.com/dshongphuc/magic-mouse-js" class="btn btn-mm-dark github-icon magic-hover magic-hover__square" target="_blank"> github</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1636192990/magicmouse/magic_mouse-1.2.1.cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>
<script type="module">
var app = new Vue({
el: "#app",
data: {
selectedEffect:'example #1',
effectList:[
"example #1",
"example #2",
"example #3",
"example #4",
"example #5",
],
options: {
cursorOuter: "circle-basic",
hoverEffect: "circle-move",
hoverItemMove: false,
defaultCursor: false,
outerWidth: 30,
outerHeight: 30
}
},
mounted(){
magicMouse(this.options);
prettier();
},
methods:{
changeEffect(){
document.body.style.cursor = "unset";
var cursorDOM = document.getElementById("magicMouseCursor");
var pointerDOM = document.getElementById("magicPointer");
if(cursorDOM){
cursorDOM.parentNode.removeChild(cursorDOM)
}
if(pointerDOM){
pointerDOM.parentNode.removeChild(pointerDOM)
}
switch(this.selectedEffect){
case "example #1":
this.options.hoverEffect = "circle-move"
this.options.cursorOuter = "circle-basic"
break;
case "example #2":
this.options.hoverEffect = "pointer-overlay"
this.options.cursorOuter = "disable"
break;
case "example #3":
this.options.hoverEffect = "pointer-blur"
this.options.cursorOuter = "disable"
break;
case "example #4":
this.options.outerWidth = 41;
this.options.outerHeight = 41;
this.options.hoverEffect = "pointer-blur"
this.options.cursorOuter = "circle-basic"
break;
case "example #5":
this.options.outerWidth = 41;
this.options.outerHeight = 41;
this.options.hoverEffect = "circle-move"
this.options.cursorOuter = "circle-basic"
this.options.defaultCursor = true
break;
}
magicMouse(this.options);
let codeBlock = document.getElementById("codeSection")
codeBlock.classList.remove("prettyprinted")
codeBlock.innerHTML = "options = " + JSON.stringify(this.options, null, 2) + "; \n magicMouse(options);";
prettier();
}
},
});
</script>
</body>
</html>